Как создать линейный график Google с помощью оболочки vue-google-charts в Vue.js?

Question

Как создать линейный график с помощью оболочки vue-google-charts в Vue.js.

Например, как добавить строки и столбцы в качестве данных.

Пример версии 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.

Answer 1

Вот как.Примечание. Обратите внимание на тип GChart, это «LineChart».chartData соответствует официальному примеру столбчатой ​​диаграммы здесь

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