如何在Vue.js中使用vue-google-charts包装器创建Google折线图？ [英] How to create a google line chart using vue-google-charts wrapper in Vue.js?

问题描述

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

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

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

For example how to add rows and columns as data.

示例Vanilla JS版本如下：

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],
  )],

如何使用Vue-google-charts包装器完成操作，因为此处未使用arrayDatatotable。

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

推荐答案

对我来说，如果将选项放在图表{{]属性中，chartOptions将不起作用，我需要添加直接在chartOptions内部的选项

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

这对我有用

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

这篇关于如何在Vue.js中使用vue-google-charts包装器创建Google折线图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！