本文介绍了谷歌烛台图上的多条线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

05-17 20:34