谷歌烛台图上的多条线
我正在尝试创建一个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>
相关文章