微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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/

原文地址:https://www.jb51.cc/js/153024.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐