向瀑布添加工具提示Google圖表

Question

我正在使用Google圖表創建WaterFall圖表並嘗試顯示工具提示（而不是默認設置）。它可以在列圖中找到。

我試圖避免使用createCustomHTMLContent。任何方式做到這一點，而不創建自定義HTML內容

 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

工具提示欄需要這樣定義。
{type: 'string', role: 'tooltip'}

它不能被定義從arrayToDataTable。

這裏，列在新的DataTable中定義，並在後面添加行。

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>