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

时间:2015-06-19 17:06:41

标签: javascript google-visualization tooltip

我尝试使用<jta-data-source>java:comp/env/jdbc/sgodb</jta-data-source> tooltip.trigger = 'selection',但工具提示并未自动显示。仅当您单击另一个工具提示时。

此处有jsfiddle显示问题。

我能尝试什么想法?

谢谢!

1 个答案:

答案 0 :(得分:0)

我最后只是使用注释。虽然如果有人想办法,我肯定会对工具提示感兴趣。

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:

  

您好,

     

这是focusTarget的已知错误:&#39; category&#39;。该特定选项使用鼠标位置作为如何定位工具提示的信号,因此程序选择不会触发工具提示显示。

     

要避免此问题,您可以在第一次加载时使用多个选择。以下是此示例,以及将focusTarget更改回&#39;类别&#39;在第一次机会: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);
});