Hinzufügen von Tool Tipps zu Wasserfall Google Diagramm

Question

Ich benutze Google-Diagramm, um ein Waterfall-Diagramm zu erstellen und versuchen, einen Tooltip (nicht die Standardeinstellung) anzuzeigen. Es funktioniert in Spaltengraphen finden.

Ich versuche, createCustomHTMLContent zu vermeiden. Können Sie dies tun, ohne benutzerdefinierten HTML-Inhalt zu erstellen?

 var data = google.visualization.arrayToDataTable([ 
      ['Sales 1', 0, 0, 38000, 38000, 'Tool Tip 1'], 
      ['Sales 2', 38000, 38000, 55000, 55000, 'Tool Tip 2'], 
      ['Sales 3', 55000, 55000, 77000, 77000, 'Tool Tip 3'], 
      ['Exp 1', 77000, 77000, 66000, 66000, 'Tool Tip 4'], 
      ['Exp 2', 66000, 66000, 22000, 22000, 'Tool Tip 5'], 
      ['Profit', 0, 0, 22000, 22000, 'Tool Tip 6'] 
     ], true); 

     var options = { 
     legend: 'none', 
      bar: { groupWidth: '100%' }, 
     title: title, 
     candlestick: { 
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red 
      risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green 
     }}; 

     var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 

Answer 1

Die Tooltip-Spalte muss als solche definiert werden.
{type: 'string', role: 'tooltip'}

Es kann nicht von arrayToDataTable definiert werden.

Hier werden die Spalten in einer neuen DataTable definiert und die Zeilen danach hinzugefügt.

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

 
function drawVisualization() { 
 
    var dataRows = [ 
 
    ['Sales 1', 0, 0, 38000, 38000, 'Tool Tip 1'], 
 
    ['Sales 2', 38000, 38000, 55000, 55000, 'Tool Tip 2'], 
 
    ['Sales 3', 55000, 55000, 77000, 77000, 'Tool Tip 3'], 
 
    ['Exp 1', 77000, 77000, 66000, 66000, 'Tool Tip 4'], 
 
    ['Exp 2', 66000, 66000, 22000, 22000, 'Tool Tip 5'], 
 
    ['Profit', 0, 0, 22000, 22000, 'Tool Tip 6'] 
 
    ]; 
 

 
    var data = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {id: 'Category', type: 'string'}, 
 
     {id: 'Min', type: 'number'}, 
 
     {id: 'Initial', type: 'number'}, 
 
     {id: 'Final', type: 'number'}, 
 
     {id: 'Max', type: 'number'}, 
 
     {id: 'Tooltip', type: 'string', role: 'tooltip'} 
 
    ] 
 
    }); 
 
    data.addRows(dataRows); 
 

 
    var options = { 
 
    legend: 'none', 
 
     bar: { groupWidth: '100%' }, 
 
    title: 'title', 
 
    candlestick: { 
 
     fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red 
 
     risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green 
 
    }}; 
 

 
    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>