使用谷歌圖表顯示加載工具提示

Question

我試圖使用tooltip.trigger = 'selection'和setSelection([{row:4,column:null}])，但工具提示不會自動顯示。只有當你點擊另一個工具提示時。

這是jsfiddle顯示的問題。

任何想法我可以嘗試嗎？

謝謝！

Answer 1

我最終只使用了註釋。雖然如果有人想出辦法，我肯定會對工具提示感興趣。

jsfiddle

var gmapData = [[{"label":"Date","type":"date"},"One",{"role":"annotation","type":"string"},"Two",{"role":"annotation","type":"string"},"Three",{"role":"annotation","type":"string"}],["Date(2012, 3, 26)",412,null,278,null,149,null],["Date(2012, 3, 27)",410,null,272,null,147,null],["Date(2012, 3, 30)",414,null,280,null,146,null],["Date(2012, 4, 1)",406,"$406",268,"$268",141,"$141"]]; 

    drawChart(); 

    function drawChart() { 
     var data = window.data = google.visualization.arrayToDataTable(gmapData); 

     // apply a tooltip formatting 
     var formatter = new google.visualization.NumberFormat({pattern: '$#,###'}); 
     var cols = (gmapData[0].length-1)/2; 
     x = cols; 
     // apply a tooltip formatting 
     while ((--x) >= 0) 
      formatter.format(data, x*2+1); 

     var options = { 
      title: 'Number Watch', 
      legend: { position: 'bottom' }, 
      interpolateNulls: true, 
      curveType: 'function', 
      selectionMode: 'single', 
      tooltip: {trigger: 'focus'}, 
      focusTarget: 'category', 
      annotations: { 
       textStyle: { 
        fontSize: 18 
       } 
      }, 
      vAxis: {format: '$#,###'}, 
      width: 400, 
      height: 300 
     }; 

     var chart = window.chart = new google.visualization.LineChart(document.getElementById('num_watch')); 
     chart.draw(data, options); 
    } 

---

github issue reply:

嗨，

這是一個已知的bug與focusTarget： '類別'。該特定選項使用鼠標位置作爲如何定位工具提示的信號，因此編程選擇不會觸發工具提示來顯示。

爲了避免這個問題，您可以在第一次加載時使用多個選擇。下面是一個例子，與改變focusTarget回「類別」一有機會復位一起：http://jsfiddle.net/b1kt6mrL/

的jsfiddle：

// ..... all previous code, not with the annotations 
chart.draw(data, options); 
chart.setSelection([{row:4, column:1}, {row:4, column:2}, {row:4, column:3}]); 

google.visualization.events.addOneTimeListener(chart, 'onmouseover', function() { 
    var selection = chart.getSelection(); 
    options.focusTarget = 'category'; 
    options.selectionMode = 'single'; 
    google.visualization.events.addOneTimeListener(chart, 'ready', function() { 
     chart.setSelection(selection); 
    }); 
    chart.draw(data, options); 
});