将工具提示添加到具有多个数据系列的Google折线图 - 简化的测试用例和屏幕截图 [英] Add tooltips to a Google Line Chart with multiple data series - with simplified test case and screenshot
问题描述
我有一个到每个数据点，例如显示：
A：x = D y = -49
我不能使用 dataTable.addColumn ，因为我的图表是由perl脚本生成的，我只是使用数据对象 cols 和 rows 如上。
您可以使用DataView为您创建工具提示列。此代码片段将在DataView中为每个数据系列动态创建一个工具提示列：
var columns = [0];
for（var i = 1; i< x.getNumberOfColumns（）; i ++）{
columns.push（i）;
columns.push（{
type：'string'，
properties：{
role：'tooltip'
}，
calc： j）{
return function（dt，row）{
return dt.getColumnLabel（j）+'：x ='+ dt.getValue（row，0）+'y ='+ dt.getValue （row，j）
}
}）（i）
}）;
}
var view = new google.visualization.DataView（x）;
view.setColumns（columns）;
查看此处的工作示例： http://jsfiddle.net/asgallant/xWwxP/
I have a Google Line Chart with 2 data series - Row A and Row B:
Here is the very simple test code - just open it in the browser and it will work:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"rows":[
{"c":[{"v":"C"},{"v":-43},{"v":-42}]},
{"c":[{"v":"D"},{"v":-49},{"v":-39}]},
{"c":[{"v":"E"},{"v":-49},{"v":-48}]},
{"c":[{"v":"F"},{"v":-50},{"v":-49}]},
{"c":[{"v":"G"},{"v":-57},{"v":-56}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"Row A","type":"number"},
{"p":{"role":"data"},"label":"Row B","type":"number"}]};
function drawCharts() {
var x = new google.visualization.DataTable(data);
var options = {
title: 'How to add tooltips?',
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('test'));
chart.draw(x, options);
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
I would like to add tooltips to each data point, which would for example display:
Row A: x=D y=-49
on mouse hover. And I can not use dataTable.addColumn, because my chart is generated at once by a perl script and I just use a data Object with cols and rows as above.
Does anybody please know, how to do it here?
You can use a DataView to create the tooltip columns for you. This code snippet will dynamically create a tooltip column in the DataView for every data series:
var columns = [0];
for (var i = 1; i < x.getNumberOfColumns(); i++) {
columns.push(i);
columns.push({
type: 'string',
properties: {
role: 'tooltip'
},
calc: (function (j) {
return function (dt, row) {
return dt.getColumnLabel(j) + ': x=' + dt.getValue(row, 0) + ' y=' + dt.getValue(row, j)
}
})(i)
});
}
var view = new google.visualization.DataView(x);
view.setColumns(columns);
See the working example here: http://jsfiddle.net/asgallant/xWwxP/
这篇关于将工具提示添加到具有多个数据系列的Google折线图 - 简化的测试用例和屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
