如何在 Vue.js 中使用 vue-google-charts 包装器创建谷歌折线图？答案

【问题标题】：How to create a google line chart using vue-google-charts wrapper in Vue.js?如何在 Vue.js 中使用 vue-google-charts 包装器创建谷歌折线图？
【发布时间】：2019-01-30 20:03:53
【问题描述】：

如何在 Vue.js 中使用 vue-google-charts 包装器创建折线图。

例如如何将行和列添加为数据。

Vanilla JS 版本示例如下：

var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');

  data.addRows([
    [0, 0],   [1, 10],
  )],

如何使用 Vue-google-charts 包装器来完成，因为我们在这里没有使用 arrayDatatotable。

【问题讨论】：

看这个例子 --> https://codesandbox.io/s/ly31wv2rql -- chartData 驻留在 App.vue...
哦，太好了。只是我们必须更换类型。我曾尝试将包添加为设置中的行。再次感谢。

标签： vue.js charts google-visualization

【解决方案1】：

如果您将选项放在图表中，chartOptions 不起作用：{} 属性，我需要直接在 chartOptions 中添加选项

这对我有用

chartOptions: {
  width: 400,
  height: 200,
  title: "Hourly Page views"
}

【讨论】：

【解决方案2】：

这里是如何。注意：请注意GChart 类型是“LineChart”。 chartData与官方的柱形图示例here相同

<template lang="html">
  <div class="component-wrapper">
    <GChart
       type="LineChart"
       :data="chartData"
       :options="chartOptions"
      />
  </div>
</template>
<script>
import { GChart } from 'vue-google-charts'
export default {
  data () {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ['Gün', 'Harcama', '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',
        }
      }
    }
  },
  components: {
    GChart
  }

}
</script>

【讨论】：