Lea*_*kim 14 javascript charts linechart google-visualization
我想知道是否有人知道如何使用DataTable,addColumn和addRow使用Google Line Charts向多行数据添加工具提示？
我已经看到它使用其他方法完成了,但这在我的项目中相当困难,我觉得愚蠢,因为没有弄清楚这一点.无论如何,我已经愚弄了我的代码来介绍我的问题的基本要点.
如您所见,工具提示显示为第2行,但不显示第1行.我的问题是:如何使用此方法向第1行添加工具提示？我的代码:http: //jsfiddle.net/Qquse/550/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow([1, 1, 2, "Some fancy tooltip"]);
data.addRow([2, 2, 4, "Some fancy tooltip"]);
data.addRow([3, 3, 6, "Some fancy tooltip"]);
data.addRow([4, 4, 8, "Some fancy tooltip"]);
data.addRow([5, 5, 10, "Some fancy tooltip"]);
var options = {
title: 'Graph'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Lea*_*kim 21
我尝试先添加DataColumns,然后再添加工具提示.原来它必须按此顺序:
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
代替
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'tooltip'});
更新了工作小提琴:http://jsfiddle.net/Qquse/1207/
| 归档时间： |
|
| 查看次数： |
8104 次 |
| 最近记录： |