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

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)
      })
    }
  }
}