谷歌烛台图上的多条线

问题描述

我正在尝试创建一个Google烛台图表，但也试图在同一图表上覆盖多条线。

如果我这样做，我可以在烛台上画一条线：

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'}}
};

但我似乎想不出如何添加第二行。

为了避免使用念力，我将省略我尝试过的所有内容，但目标是只添加另一个数据列，并指定告诉图表将新数据覆盖为第二行所需的内容。

有没有办法实现这一点？

推荐答案

当然可以，只需使用series选项按您的方式继续添加行序列.

对于CandleStickChart，需要五列
这五列算作一个系列，
在本例中，系列0

这使得第6列系列1
您已将其更改为'line'

1: {type: 'line'}

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

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

请参阅以下工作片段.

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);
});

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

这篇关于谷歌烛台图上的多条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！