设置谷歌折线图工具提示数据的格式以使用百分比

Format google line chart tooltip data to use a percentage

本文关键字：百分比 格式 谷歌 折线图 工具提示 数据 设置      更新时间：2023-09-26

我有一个折线图，其中包含来自测试JSON文件的数据，如下所示：

{
  "cols": [
        {"id":"Day","label":"Day","type":"number"},
        {"id":"Failed","label":"Checks Failed","type":"number"},
        {"id":"Passed","label":"Checks Passed","type":"number"},
      ],
  "rows": [
        {"c":[{"v":"1","f":null},{"v": "25","f":null},{"v": "72","f":null}]},
        {"c":[{"v":"2","f":null},{"v": "6","f":null},{"v": "67","f":null}]},
        {"c":[{"v":"3","f":null},{"v": "6","f":null},{"v": "32","f":null}]},
        {"c":[{"v":"4","f":null},{"v": "6","f":null},{"v": "7","f":null}]},
        {"c":[{"v":"5","f":null},{"v": "6","f":null},{"v": "57","f":null}]},
      ]
}

我有我的图表脚本：

var graph_1 = $.ajax({
    url: "/linegraph.json",
    dataType: "json",
    async: false
}).responseText;
var data = new google.visualization.DataTable(graph_1);
var linechart_1 = new google.charts.Line(document.getElementById('lg1'));
var lg1_options = {
  legend: {position: 'none'},
  height: 100,
  vAxis: {format: '#%'}
};
linechart_1.draw(data, lg1_options);

格式选项似乎没有给我其他人建议的结果。我的工具提示只显示一个普通的数字，而我希望看到后面跟着%的数字。我哪里错了？

材料图表处于测试阶段。外观和交互在很大程度上是最终的，但声明选项的方式不是。如果您要将经典折线图转换为材料折线图，则需要替换此行：

chart.draw（数据，选项）

这个：

chart.draw（数据，googlecharts.Line.convertOptions（选项））

文档

所以你会想用以下代码替换你的代码：

linechart_1.draw(data, google.charts.Line.convertOptions(lg1_options));

请注意，#%格式化程序强制它将您的值解释为百分比，即5 == 500%，而不是5%，因此您可能希望使用format:'#''%'''

JSFiddle

相关文章：