0

我使用谷歌图表来绘制饼图。我需要更改切片偏移值切片 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 事件。有什么建议么？

4

1 回答 1

0

这不是因为您覆盖了鼠标悬停事件。这是因为你在chart.draw()里面打电话。Draw 方法取消了之前渲染的任何工具提示。

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

于 2013-10-11T07:55:56.573 回答