谷歌图表 API 折线图 - 悬停时如何显示多个值

Question

使用谷歌的折线图时，如果你将鼠标悬停在一个点上，它会给你关于那个点的信息。例如，如果一个点位于 x:3, y:50 处，而 y 轴称为英寸，则将鼠标悬停在这些点上将如下所示：

.----------.
|3         |
|Inches: 50|
`----------`

当我获取数据时，每个点也存储了一个额外的值。所以我的数组看起来像：[[3, 50, 20], [4, 52, 22], [5, 54, 24]]，当我悬停时，我希望它看起来像这样：

.----------.
|Time: 3   |
|Inches: 50|
|Extra: 20 |
`----------`

所以我有两个问题是：

1. 如何在 x 值之前添加"时间："标签？
2. 如何添加要显示的第三个值？

这是我拥有的代码。这样做的作用是创建第二行，而不是将数据相加。你可以看看这里，明白我的意思。您也可以将鼠标悬停在点上，看看我在说什么悬停。我确信有一个简单的方法可以做到这一点，我只是错过了一些东西。

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Time', 'Inches', 'Extra'],
      [  3   ,    50   ,    20  ],
      [  4   ,    52   ,    22  ],
      [  5   ,    54   ,    24  ]
    ]);
    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 500, height: 400,
                    vAxis: {title: 'Inches', maxValue: 10},
                    hAxis: {title: 'Time'}}
        );
}
google.setOnLoadCallback(drawVisualization);

Answer 1

我解决了这个问题，将"focusTarget： 'category'"添加到选项中：

draw(data,{..., focusTarget: 'category'}

Answer 2

我找到了解决方案。这不是我最喜欢的，因为重复数据不是最有效的方法，但无论如何，它是一种解决方案，所以我会在这里发布它。

第一个问题来自我创建数据表的方式。 arrayToDataTable是有用的，但它是有限的。所以我离开了那个。这允许我添加自己的列，并在创建这些列时更具描述性。例如，这样做的关键是 分配一个role .因此，我创建了将用于绘制图表的前 2 列，然后添加了第三列，其中包含string类型和tooltip的角色。

现在，当我将数据添加到图表中时，对于第三列，我将准确传递将鼠标悬停在点上时要显示的内容。这就是重复数据的用武之地。这没什么大不了的，但我认为可能有一个更好/更直接的方法。无论如何，这是我的新图表的链接，这是我的代码：

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Time');
    data.addColumn('number', 'Inches');
    data.addColumn({type: 'string', role: 'tooltip'});
    data.addRow(['3', 50, 'Time: 3n Inches: 50n Extra: 20']);
    data.addRow(['4', 52, 'Time: 4n Inches: 52n Extra: 22']);
    data.addRow(['5', 54, 'Time: 5n Inches: 54n Extra: 24']);
    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 500, height: 400,
                    vAxis: {title: 'Inches', maxValue: 10},
                    hAxis: {title: 'Time'}}
        );
}
google.setOnLoadCallback(drawVisualization);