How to create a google line chart using vue-google-charts wrapper in Vue.js?

问题

How to create a line chart using vue-google-charts wrapper in Vue.js.

For example how to add rows and columns as data.

The example Vanilla JS version is as follows:

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

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

How is it done using Vue-google-charts wrapper, since we are not using arrayDatatotable here.

回答1:

For me chartOptions don't work if you put the options inside a chart:{} property, I needed to add the options directly inside chartOptions

This worked for me

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

回答2:

Here is how. Note: Please notice the GChart type it is "LineChart". The chartData is same as the official example of the column chart 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>

来源：https://stackoverflow.com/questions/54448692/how-to-create-a-google-line-chart-using-vue-google-charts-wrapper-in-vue-js