7

我有一个带有 2 个数据系列的Google 折线图Row A-和Row B：

在此处输入图像描述

这是非常简单的测试代码 - 只需在浏览器中打开它就可以了：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">

        var data = {"rows":[
        {"c":[{"v":"C"},{"v":-43},{"v":-42}]},
        {"c":[{"v":"D"},{"v":-49},{"v":-39}]},
        {"c":[{"v":"E"},{"v":-49},{"v":-48}]},
        {"c":[{"v":"F"},{"v":-50},{"v":-49}]},
        {"c":[{"v":"G"},{"v":-57},{"v":-56}]}],

        "cols":[
        {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
        {"p":{"role":"data"},"label":"Row A","type":"number"},
        {"p":{"role":"data"},"label":"Row B","type":"number"}]};

        function drawCharts() {
            var x = new google.visualization.DataTable(data);

            var options = {
                title: 'How to add tooltips?',
                width: 800,
                height: 600
            };

            var chart = new google.visualization.LineChart(document.getElementById('test'));
            chart.draw(x, options);
        }

        $(function() {
            google.setOnLoadCallback(drawCharts);
        });

</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

我想为每个数据点添加工具提示，例如显示：

A行：x=D y=-49

鼠标悬停时。而且我不能使用dataTable.addColumn，因为我的图表是由 perl 脚本立即生成的，而我只是使用上面的dataObject 和colsand rows。

请问有人知道，这里怎么做吗？

4

1 回答 1

11

您可以使用 DataView 为您创建工具提示列。此代码片段将为每个数据系列在 DataView 中动态创建一个工具提示列：

var columns = [0];
for (var i = 1; i < x.getNumberOfColumns(); i++) {
    columns.push(i);
    columns.push({
        type: 'string',
        properties: {
            role: 'tooltip'
        },
        calc: (function (j) {
            return function (dt, row) {
                return dt.getColumnLabel(j) + ': x=' + dt.getValue(row, 0) + ' y=' + dt.getValue(row, j)
            }
        })(i)
    });
}
var view = new google.visualization.DataView(x);
view.setColumns(columns);

请参阅此处的工作示例：http: //jsfiddle.net/asgallant/xWwxP/

于 2013-07-29T19:20:24.353 回答