javascript – 多行线的工具提示Google线图

我想知道有没有人知道如何使用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,4,"Some fancy tooltip"]);
        data.addRow([3,3,6,"Some fancy tooltip"]);
        data.addRow([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>

解决方法

我尝试先添加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','Line 1');
data.addColumn('number',role: 'tooltip'});
data.addColumn({type: 'string',role: 'tooltip'});

更新工作小提琴：http://jsfiddle.net/Qquse/1207/

javascript – 多行线的工具提示Google线图

解决方法

相关文章