带有注释和多条图形线的LineChart [英] LineChart with annotations and multiple graph lines
问题描述
我正在使用Google图表尝试创建类似于第一个标记为示例"的折线图:
I'm using Google Charts to try and create a line chart that looks like the first one labelled Example:
https://developers.google.com/chart/interactive/docs/画廊/线路图
但是,我不能使用第一个示例中所示的google.visualization.arrayToDataTable().
However, I cannot use google.visualization.arrayToDataTable() as shown in the 1st example.
问题是我想向每个绘制的点添加批注和annotationText.文档说我必须使用:
The problem is I want to add annotations and annotationText to each plotted point. The documentation says I must use:
google.visualization.DataTable()
google.visualization.DataTable()
为此,我必须执行以下操作:
In order to do that, i must do the following:
var data1 = [
[ 'C' ,4, 'o', 'note'],
[ 'D' ,6, 'o', 'note'],
[ 'O' ,4, 'o', 'note']
];
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'X'); // Implicit series 1 data col.
chartData.addColumn('number', 'DOGS'); // Implicit domain label col.
chartData.addColumn({type:'string', role:'annotation'});
chartData.addColumn({type:'string', role:'annotationText'});
chartData.addRows(data1);
var chart = new
google.visualization.LineChart(document.getElementById('visualization'));
var options = {
title: "My Title",
};
chart.draw(chartData,options);
这给了我一行绘图数据.
This gives me one line of plotted data.
我该如何调整以允许我添加第二行绘图数据呢?
How do I adapt this to allow me to add a 2nd line of plotted data?goo
推荐答案
您必须添加其他列并扩展数据.例如:
You have to add additional columns and expand your data. For example:
chartData.addColumn('string', 'X'); // Implicit series 1 data col.
chartData.addColumn('number', 'DOGS'); // Implicit domain label col.
chartData.addColumn({type:'string', role:'annotation'});
chartData.addColumn({type:'string', role:'annotationText'});
chartData.addColumn('number', 'CATS'); // Implicit domain label col.
chartData.addColumn({type:'string', role:'annotation'});
chartData.addColumn({type:'string', role:'annotationText'});
var data1 = [
[ 'C', 4, 'Dog1', 'Dog1 note', 7, 'Cat1', 'Cat1 note'],
[ 'D', 6, 'Dog2', 'Dog2 note', 11, 'Cat2', 'Cat3 note'],
[ 'O', 4, 'Dog3', 'Dog3 note', 13, 'Cat3', 'Cat3 note']
];
chartData.addColumn('string', 'X'); // Implicit series 1 data col.
chartData.addColumn('number', 'DOGS'); // Implicit domain label col.
chartData.addColumn({type:'string', role:'annotation'});
chartData.addColumn({type:'string', role:'annotationText'});
chartData.addColumn('number', 'CATS'); // Implicit domain label col.
chartData.addColumn({type:'string', role:'annotation'});
chartData.addColumn({type:'string', role:'annotationText'});
var data1 = [
[ 'C', 4, 'Dog1', 'Dog1 note', 7, 'Cat1', 'Cat1 note'],
[ 'D', 6, 'Dog2', 'Dog2 note', 11, 'Cat2', 'Cat3 note'],
[ 'O', 4, 'Dog3', 'Dog3 note', 13, 'Cat3', 'Cat3 note']
];
chartData.addRows(data1);
请参见 jsBin上的示例
这篇关于带有注释和多条图形线的LineChart的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!