将工具提示添加到具有多个数据系列的 Google 折线图 - 带有简化的测试用例和屏幕截图 [英] Add tooltips to a Google Line Chart with multiple data series - with simplified test case and screenshot
问题描述
我有一个带有 2 个数据系列的 ,这将有助于示例显示:
<块引用>A 行:x=D y=-49
鼠标悬停.而且我不能使用 dataTable.addColumn
,因为我的图表是由 perl 脚本立即生成的,而我只使用带有 cols
的 data
对象和 rows
同上.
有人知道吗,这里怎么做?
您可以使用 DataView 为您创建工具提示列.此代码段将在 DataView 中为每个数据系列动态创建工具提示列:
var columns = [0];for (var i = 1; i < x.getNumberOfColumns(); i++) {列推(i);列.推({类型:'字符串',特性: {角色:'工具提示'},计算:(函数(j){返回函数(dt,行){return dt.getColumnLabel(j) + ': x=' + dt.getValue(row, 0) + ' y=' + dt.getValue(row, j)}})(一世)});}var view = new google.visualization.DataView(x);view.setColumns(列);
在此处查看工作示例: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屋!