google 烛台图表上的多条线

Question

我正在尝试创建一个 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'}}
};

但我似乎不知道如何添加第二行。

为避免混淆，我将省略我尝试过的所有内容，但目标是仅添加另一个数据列并指定任何必要的内容以告诉图表将新数据作为第二个数据叠加线。

有什么方法可以让它工作吗？

Answer 1

当然，只需使用 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>

google 烛台图表上的多条线

Multiple lines over google candlestick chart

javascript

charts

google-visualization

candlestick-chart