JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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线图全部内容,希望文章能够帮你解决javascript – 多行线的工具提示Google线图所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: