[英]Google Charts: Line graph + points?
我有线图显示价值随时间的变化。 它有效,但我认为如果我能在悬停时添加显示工具提示的点数会很棒。 像这样的东西: 但我不能直接在其中一个点上使用工具提示。
var data = google.visualization.arrayToDataTable([
['time', 'value'],
['12:00', 1],
['13:00', 5],
['14:00', 8],
['15:00', 12],
['16:00', 11],
['17:00', 15],
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {});
你原来的代码:
var data = google.visualization.arrayToDataTable([
['time', 'value'],
['12:00', 1],
['13:00', 5],
['14:00', 8],
['15:00', 12],
['16:00', 11],
['17:00', 15],
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {});
您需要添加两列 - 一列用于注释标记,一列用于注释文本。 假设您希望在14:00和16:00发表两条评论,例如:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'time');
data.addColumn('number', 'value');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
['12:00', 1, null, null],
['13:00', 5, null, null],
['14:00', 8, 'A', 'This is Point A'],
['15:00', 12, null, null],
['16:00', 11, 'B', 'This is Point B'],
['17:00', 15, null, null],
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {});
}
这是结果:
要添加asgallant的解决方案以向图表添加点,您可以执行以下操作:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'time');
data.addColumn('number', 'value');
data.addColumn('number', 'points');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
['12:00', 1, null, null, null],
['13:00', 5, null, null, null],
['14:00', 8, 8, 'A', 'This is Point A'],
['15:00', 12, null, null, null],
['16:00', 11, 11, 'B', 'This is Point B'],
['17:00', 15, null, null, null],
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
series: {
0: {
// set any applicable options on the first series
},
1: {
// set the options on the second series
lineWidth: 0,
pointSize: 5,
visibleInLegend: false
}
}
});
}
结果如下:
如果我正确地阅读了您的问题,您希望每个数据点的线都出现点,并且将鼠标悬停在这些点上会产生工具提示。 如果这就是你所追求的,那么图表已经完成了这两件事,你只是看不到这些点,因为默认情况下它们的大小为0.在LineChart中设置“pointSize”选项以使点更大:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
pointSize: 5
});
编辑:
要仅强调图表中的某些点,您需要添加一个仅包含这些值的新数据系列(您可以将此系列直接添加到DataTable,或者如果您能以某种方式区分,则可以使用DataView动态创建它你想要从其他人强调的要点)。 然后你想设置图表的series
选项来隐藏第二个系列中的线条,从图例中删除第二个系列,并使其点更大(如果你想匹配颜色,你也可以在这里设置它的颜色),如下所示:
series: {
0: {
// set any applicable options on the first series
},
1: {
// set the options on the second series
lineWidth: 0,
pointSize: 5,
visibleInLegend: false
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.