谷歌图表：带有自定义工具提示的多行

Posted 2023-02-19

【中文标题】谷歌图表：带有自定义工具提示的多行

【英文标题】：Google Charts: multiple lines with custom tooltips

【发布时间】：2013-12-25 04:43:22

【问题描述】：

我有一个包含多行的 Google LineChart。这些点不共享相同的 X 值，因此我必须以某种方式格式化我的数据以使其工作：

var data = google.visualization.arrayToDataTable([
        ["Y", "Your X & Y", "Product 1", "Product 2", "Product 3"],
        [419, 589, null, null, null],
        [386, null, 504, null, null],
        [386, null, 526, null, null],
        [387, null, 543, null, null],
        [395, null, 564, null, null],
        [402, null, 591, null, null],
        [408, null, 612, null, null],
        [378, null, null, 501, null],
        [398, null, null, null, 600],
        [460, null, null, null, 500]
    ]);

现在我想向这些行添加自定义工具提示，我尝试添加一个额外的列并将角色设置为工具提示..但这只会影响第一行。

查看两个图表（有和没有工具提示）：http://jsfiddle.net/TD92C/8/

如何为所有行添加自定义工具提示？谢谢

已解决： http://jsfiddle.net/asgallant/TD92C/14/

【问题讨论】：

感谢先生分享您的解决方案

【参考方案1】：

你必须让你的变量像这样

var data = google.visualization.arrayToDataTable([
//Columns

    ["Y", //Name  of the X-axis marker
    "Your X & Y",type: 'string', role: 'tooltip',
    "Product 1",type: 'string', role: 'tooltip',
    "Product 2",type: 'string', role: 'tooltip',
    "Product 3",type: 'string', role: 'tooltip',],
//Rows
//Add tooltip column after every value in each row

    [419,589,"tooltip info about your x & y",null,'',null,'',null,''],
    [386,null,'',504,'','Custom Tooltip',null,'',null,''],
    [386,null,'',526,'Custom Tooltip',null,'',null,''],
    [387,null,'',543,'Custom Tooltip',null,'',null,''],
    [378,null,'',null,'',501,'Custom Tooltip',null,''],
    [383,null,'',null,'',511,'Custom Tooltip',null,''],
    [368,null,'',null,'',null,'',526,'Custom Tooltip'],
    [373,null,'',null,'',null,'',547,'Custom Tooltip'],
]);

Fiddle 数据看起来不同，但如果您将第一个元素更正为与第一列索引中显示的列完全相同的字符串，它将是正确的