使用谷歌图表显示加载工具提示

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); 
});