Question

我试图创建一个谷歌烛台图表，但也尝试在同一个图表上叠加多行。

如果我执行以下操作，我可以在烛台上画一条线：

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');

data.addRow('Mon', 1, 1, 2, 2, 1.5]);
data.addRow('Tue', 2, 2, 3, 3, 2.5]);
data.addRow('Wed', 2, 2, 4, 4, 3.5]);

var options = {
  legend:'none',
  series: {1: {type: 'line'}}
};

但我似乎无法弄清楚如何添加第二行。

为了避免混淆，我将遗漏所有我尝试过的事情，但目标是只添加另一个数据列，并指定告诉图表将新数据覆盖的必要条件第二行。

有没有办法让这项工作？

Answer 1

当然，只需使用series选项...

继续添加系列对于CandleStickChart，

需要五列，
这五列列为一个系列，
在此示例中，系列0

制作第6列系列1
您已更改为'line'

1: {type: 'line'}

添加另一列将是系列2，
只需添加另一列并更改类型...

  1: {type: 'line'},
  2: {type: 'line'}

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Low');
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Close');
  data.addColumn('number', 'High');
  data.addColumn('number', 'Average');
  data.addColumn('number', 'Average 2');

  data.addRow(['Mon', 1, 1, 2, 2, 1.5, 2.5]);
  data.addRow(['Tue', 2, 2, 3, 3, 2.5, 3.5]);
  data.addRow(['Wed', 2, 2, 4, 4, 3.5, 4.5]);

  var options = {
    legend: 'none',
    series: {
      1: {type: 'line'},
      2: {type: 'line'}
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.CandlestickChart(container);
  chart.draw(data, options);
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

谷歌烛台图表上的多行

1 个答案: