Question

我使用谷歌图表来删除饼图。我需要更改切片偏移值切片onhover事件。我写了一些代码，但问题是图表没有显示工具提示。

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', { 'packages': ['corechart'] });

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    var options = {
        is3D: true,
        tooltip: { textStyle: { color: '#000000' }, showColorCode: true }

    };
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));




    function selectHandlerOver(e) {
        //alert('selectHandlerOver');
        var row = e.row;
        var s = $.parseJSON('{ ' +

            '"is3D": "true",' +
            '"slices": {  "' + row + '": { "offset": "0.2" } },' +
            '"animation": { "duration": "100", "easing": "out"}' +
        '}')
        chart.draw(data, s);
    }

    function selectHandlerOut(e) {
        //alert('selectHandlerOut');
        var row = e.row;
        var s = $.parseJSON('{"is3D": "true", "slices": {  "' + row + '": { "offset": "0.0" } } }')
        chart.draw(data, s);

    }

    google.visualization.events.addListener(chart, 'onmouseover', selectHandlerOver);
    google.visualization.events.addListener(chart, 'onmouseout', selectHandlerOut);

    chart.draw(data, options);
}

我认为这是因为O使用自定义行为覆盖onmouseover事件。有什么建议吗？

Answer 1

这不是因为您已将鼠标覆盖在事件上。这是因为你在里面调用chart.draw()。 Draw方法取消为前一个渲染的任何工具提示。

如果您想要细粒度控制，最好使用jQueryUI之类的东西来显示工具提示。

未显示带有饼图的Google图表工具提示

1 个答案: