多条线的工具提示 Google 折线图答案

【问题标题】：Tooltips for multiple lines Google Line Chart多条线的工具提示 Google 折线图
【发布时间】：2014-03-24 04:39:10
【问题描述】：

我想知道是否有人知道您将如何使用 DataTable、addColumn 和 addRow 使用 Google 折线图向多行数据添加工具提示？

我已经看到它使用其他方法完成，但这在我的项目中相当困难，而且我觉得自己很笨，因为没有弄清楚这一点。无论如何，我已经简化了我的代码来展示我的问题的本质。

如您所见，工具提示显示为第 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>

【问题讨论】：

谢谢，解决了我的问题。
@Elger，如果您认为这对未来的访问者非常重要且有用，请删除您的问题或添加您自己的答案。
@OlegV.Volkov ：这不是我的问题，也许你可以问 Leakim

标签： javascript charts google-visualization linechart

【解决方案1】：

我尝试先添加两个数据列，然后添加工具提示。原来它必须按这个顺序：

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/

【讨论】：

谢谢，您的经验为我节省了同样痛苦的实验，因为谷歌图表中自定义工具提示的文档没有为此提供多个数据列示例。
谢谢！不会猜到列顺序很重要。