vue charts_适用于Google Charts lib的Reactive Vue.js包装器

vue charts

vue-google-charts (vue-google-charts)

Reactive Vue.js wrapper for Google Charts lib.

适用于Google Charts lib的React性Vue.js包装器。

安装 (Installation)

npm i vue-google-charts

默认导入 (Default import)

Install a component globally (use as plugin):

全局安装组件(用作插件)：

import Vue from 'vue'
import VueGoogleCharts from 'vue-google-charts'

Vue.use(VueGoogleCharts)

Use locally in a component:

在组件中本地使用：

import { GChart } from 'vue-google-charts'

export default {
  components: {
    GChart
  }
}

浏览器 (Browser)

<script src="vue.js"></script>
<script src="vue-google-charts/dist/vue-google-charts.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

该插件应自动安装。 如果没有，您可以按照以下说明手动安装。

用法 (Usage)

首先阅读Google图表文档 (Read the Google Charts docs first)

The GChart component is a wrapper for the original Google Charts, so it's assumed you are familiar with the vanilla Google Charts usage (https://developers.google.com/chart/).

GChart组件是原始Google Charts的包装，因此假定您熟悉原始的Google Charts用法( https://developers.google.com/chart/ )。

With vue-google-charts package you don't need to link script loader and load Google Charts package manually.

使用vue-google-charts包，您无需链接脚本加载器并手动加载Google Charts包。

Another bonus — reactive data binding. A chart will be redrawn automatically once data or options prop is changed.

另一个好处-React性数据绑定。 更改data或options属性后，图表将自动重绘。

简单用法： (Simple usage:)

<GChart
    type="ColumnChart"
    :data="chartData"
    :options="chartOptions"
  />

---

---

export default {
  data () {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
      ],
      chartOptions: {
        chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
      }
    }
  }
}

---

---

加载其他软件包： (Load additional packages:)

<GChart
    :settings="{ packages: ['corechart', 'table', 'map'] }"
    type="Map"
    :data="chartData"
    :options="chartOptions"
  />

Using settings prop you can specify any setting available for google charts loader: packages, language, callback, mapsApiKey.

使用settings您可以指定适用于Google图表加载器的任何设置： packages ， language ， callback ， mapsApiKey 。

See more on available setting

查看更多可用设置

There's also version prop, so you can load a specific version, e.g. version="upcoming".

还有一个version属性，因此您可以加载特定的版本，例如version="upcoming" 。

See more on available versions

查看更多可用版本

---

---

添加事件监听器： (Add event listeners:)

<GChart
    type="ColumnChart"
    :data="chartData"
    :options="chartOptions"
    :events="chartEvents"
  />

export default {
  data () {
    return {
      // {
      //    eventName: handlerFunction,
      //    eventName: handlerFunction,
      // }
      chartEvents: {
        'select': () => {
          // handle event here
        }
      }
    }
  }
}

---

---

用户@ready非常定制 (User @ready for something very custom)

You can get chart instance and charts api references to draw a custom chart:

您可以获取图表实例和图表API参考以绘制自定义图表：

<GChart
    type="ColumnChart"
    @ready="onChartReady"
  />

export default {
  methods: {
    onChartReady (chart, google) {
      const query = new google.visualization.Query('https://url-to-spreadsheet...')
      query.send(response => {
        const options = {
          // some custom options
        }
        const data = response.getDataTable()
        chart.draw(data, options)
      })
    }
  }
}

---

---

插件开发 (Plugin Development)

安装 (Installation)

The first time you create or clone your plugin, you need to install the default dependencies:

首次创建或克隆插件时，需要安装默认依赖项：

npm i

观看并编译 (Watch and compile)

This will run webpack in watching mode and output the compiled files in the dist folder.

这将以监视模式运行webpack，并将编译后的文件输出到dist文件夹中。

npm run dev

在另一个项目中使用 (Use it in another project)

While developing, you can follow the install instructions of your plugin and link it into the project that uses it.

在开发过程中，您可以按照插件的安装说明进行操作，并将其链接到使用该插件的项目中。

In the plugin folder:

在插件文件夹中：

npm link

In the other project folder:

在另一个项目文件夹中：

npm link vue-google-charts

This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.

这会将其作为符号链接安装在依赖项中，以便对插件进行任何修改。

手动构建 (Manual build)

This will build the plugin into the dist folder in production mode.

这将在生产模式下将插件构建到dist文件夹中。

npm run build

---

---

翻译自: https://vuejsexamples.com/reactive-vue-js-wrapper-for-google-charts-lib/

vue charts