Google条形图自定义工具提示无效

时间:2016-04-19 21:06:34

标签: google-visualization

此代码:

chart = new google.charts.Bar(document.getElementById('chart'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '');
dataTable.addColumn('number', 'Value');
dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
var rows = [
    ['U.S.', 2, "tool"],
    ['France', 10, "tip"]
];
dataTable.addRows(rows);
chart.draw(dataTable);

不会产生自定义工具提示。

奇怪的是,它适用于其他图表类型。

你知道为什么请吗?

[编辑]显然这是不可能的。有没有其他方法可以在工具提示中添加“%”符号,如此截图中所示?

enter image description here

1 个答案:

答案 0 :(得分:4)

默认情况下,工具提示应显示格式化值 对您的值使用对象表示法,您可以提供格式化值(f:
以及所需的值(v:)...

您也可以在加载表格后使用dataTable.setFormattedValue(...) ...

示例...



google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  chart = new google.charts.Bar(document.getElementById('chart'));
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', '');
  dataTable.addColumn('number', 'Value');
  var rows = [
      ['U.S.', {v: 2, f: '2%'}],    // add %
      ['France', {v: 10, f: '10%'}],  // add %
      ['Germany', {v: 15, f: 'whatever we want'}]   // add whatever we want 
  ];
  dataTable.addRows(rows);
  chart.draw(dataTable);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
&#13;
&#13;
&#13;