javascript - 如何在初始化后动态更新Google可视化图表的工具提示？

Question

图表在页面加载时呈现。然后，套接字发送数据以逐列更新。这样，从视觉上看，数据已正确更新，因为列增长，但工具提示始终显示零。

看这个 fiddle : http://jsfiddle.net/sw2mq7Lq/1/

function example_callback(){
  window.data_table_chart_receivable.setValue(1,1,10000); /* Bars graph */
  window.data_table_chart_receivable.setValue(1,2,10000); /* Line graph */
  window.data_table_chart_receivable.setValue(1,3,10000); /* Tooltip */

  window.chart_receivable.draw( window.data_table_chart_receivable, window.options_chart_receivable );
}

example_callback()正在模拟页面加载后插入的数据，为Nov列插入数据。该列在视觉上与零不同，但工具提示仍然显示零。

页面加载中插入的二月列正确显示了工具提示。

初始化后如何更新工具提示的值？

在 Chrome 中检查显示该值已更新为 100000，但格式未更新，仍然显示 $ 0.00:

Answer 1

工具提示显示格式化值，因此您只需重新格式化数据即可。

查看示例(来自提供的 fiddle )...

function draw_chart_receivable() {
  var data_table = new google.visualization.DataTable();

  data_table.addColumn({"type":"string","label":"Mes"});
  data_table.addColumn({"type":"number","label":"Ventas"});
  data_table.addColumn({"type":"number","label":"Ventas"});
  data_table.addColumn({"type":"number","role":"tooltip"});

  data_table.addRow([{v: "2015-10-01", f: "Oct"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2015-11-01", f: "Nov"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2015-12-01", f: "Dic"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2016-01-01", f: "Ene"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);
  data_table.addRow([{v: "2016-02-01", f: "Feb"}, {v: 22609.45}, {v: 22609.45}, {v: 22609.45}]);
  data_table.addRow([{v: "2016-03-01", f: "Mar"}, {v: 0.0}, {v: 0.0}, {v: 0.0}]);

  var formatter = new google.visualization.NumberFormat({decimalSymbol: ".", groupingSymbol: ",", prefix: "$ "});
  formatter.format(data_table, 1);
  formatter.format(data_table, 3);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_receivable'));

  options = {fontSize: 14, height: 320, width: "100%", colors: ["#e7e7e7","#95d600"], animation: {duration: 1000, startup: true, easing: "out"}, chartArea: {width: "100%", height: "80%"}, hAxis: {baselineColor: "#CCCCCC", textStyle: {color: "#999999"}}, vAxis: {baselineColor: "#CCCCCC", textPosition: "none", ticks: [0,22609], gridlines: {count: 0}, gridlineColor: "white"}, legend: {position: "none"}, tooltip: {textStyle: {color: "#95d600", fontSize: 12}}, seriesType: "bars", bar: {groupWidth: "90%"}, series: [{enableInteractivity: false, tooltip: "one", dataOpacity: 0.4},{type: "area", lineWidth: 3, pointSize: 10, dataOpacity: 0.7}], hasCurrency: true}

  chart.draw(data_table, options);

  window.options_chart_receivable = options;
  window.data_table_chart_receivable = data_table;
  window.chart_receivable = chart;
  window.formatter = formatter;

  example_callback();
};

google.load('visualization', '1.0', {packages: ['corechart'], callback: draw_chart_receivable});

function example_callback(){
  window.data_table_chart_receivable.setValue(1,1,10000);
  window.data_table_chart_receivable.setValue(1,2,10000);
  window.data_table_chart_receivable.setValue(1,3,10000);

  // re-format data
  window.formatter.format(window.data_table_chart_receivable, 1);
  window.formatter.format(window.data_table_chart_receivable, 3);

  window.chart_receivable.draw( window.data_table_chart_receivable, window.options_chart_receivable );
}

<script src="https://www.google.com/jsapi"></script>
<div id="chart_receivable"></div>

您还可以使用setFormattedValue，但随后您需要手动执行格式化...