0

グーグルチャートを使って円グラフを描いています。スライス オフセット値スライス オンホバー イベントを変更する必要があります。コードを書きましたが、問題はチャートにツールチップが表示されないことです。

// 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