Wie kann der Tooltip eines Google Visualization-Diagramms nach der Initialisierung dynamisch aktualisiert werden?

Question

Das Diagramm wird gerendert, wenn die Seite geladen wird. Dann sendet ein Socket Daten, um Spalte für Spalte zu aktualisieren. Damit werden die Daten visuell korrekt aktualisiert, da die Spalte wächst, aber der Tooltip immer Null anzeigt.

Sehen Sie diese Geige: 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); 
} 

Die example_callback() wird Daten eingefügt nach dem Laden der Seite zu simulieren, Daten für die Spalte Nov einfügen. Die Spalte ist visuell verschieden von Null, aber der Tooltip zeigt immer noch Null an.

Und die Spalte Feb, die in die Seitenladung eingefügt wird, zeigt korrekt den Tooltip.

Wie kann ich den Wert der Tooltips nach der Initialisierung aktualisieren?

in Chrome Inspizieren zeigt, dass der Wert auf 100000 aktualisiert wird, aber das Format nicht aufdatiert und zeigt $ noch 0.00:

Answer 1

Tooltips zeigen die formatierten Wert, so dass Sie nur brauchen Formatieren Sie die Daten neu.

Siehe Beispiel (aus versehener Geige) ...

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>

Sie könnten auch setFormattedValue verwenden, aber dann würden Sie brauchen, um die Formatierung manuell auszuführen ...