Charts 将工具提示添加到具有多个数据系列的Google折线图中-带有简化的测试用例和屏幕截图_Charts_Google Visualization

Charts 将工具提示添加到具有多个数据系列的Google折线图中-带有简化的测试用例和屏幕截图

charts google-visualization

Charts 将工具提示添加到具有多个数据系列的Google折线图中-带有简化的测试用例和屏幕截图,charts,google-visualization,Charts,Google Visualization,我有两个数据系列-行a和行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"

我有两个数据系列-

行a

和

行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>


变量数据={“行”：[
{“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}]}，
“科尔斯”：[
{“p”：{“role”：“domain”}，“label”：“MEASUREMENT”，“type”：“string”}，
{“p”：{“role”：“data”}，“label”：“Row A”，“type”：“number”}，
{“p”：{“角色”：“数据”}，“标签”：“B行”，“类型”：“编号”}]}；
函数绘图图（）{
var x=新的google.visualization.DataTable（数据）；
变量选项={
标题：“如何添加工具提示？”，
宽度：800，
身高：600
};
var chart=new google.visualization.LineChart（document.getElementById（'test'）；
绘制图表（x，选项）；
}
$（函数（）{
setOnLoadCallback（绘图图）；
});

我想添加到每个数据点，例如显示：

A行：x=D y=-49

鼠标悬停。我不能使用

dataTable.addColumn

，因为我的图表是由一个perl脚本立即生成的，我只使用一个

data

对象和上面的

cols

和

行

是否有人知道如何在此处执行此操作？

您可以使用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);

var列=[0]；
对于（var i=1；i