javascript - 当我在饼图中选择一个切片时，我想显示切片选择的某种视觉表示

Question

谁能告诉我如何实现以下效果:

当我在饼图中选择一个切片时，我想显示某种 切片选择的视觉表示。

1. 要么将选定的切片从图形中移开，使其 脱颖而出。
2. 或通过在切片上画一个白色边框来表明 选择了相应的切片。

有没有人做过类似的事情，如果有请贴出一些代码。 我在这个组和其他地方做了很多搜索，但没能找到 找到任何东西。很难相信核心情节不能支持这个 动画。

JS fiddle link

圆周率图代码为:

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

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', 5],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 6],
        ['Sausage', 3]    ]);

var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#aaaa11","#22aa99","#994499"];

var legend = document.getElementById('legend');
var lis = [];

var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
    // increment the total
    total += data.getValue(i, 1);

    // get the data
    var label = data.getValue(i, 0);
    var value = data.getValue(i, 1);


    // create the legend entry
    lis[i] = document.createElement('li');
    lis[i].setAttribute('data-row',i);
    lis[i].setAttribute('data-value',value);
    lis[i].id = 'legend_' + data.getValue(i, 0);
    lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';" ></div>' + label + ': ' + value +'</span>';

    // append to the legend list
    legend.appendChild(lis[i]);

}

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
    title: 'How Much Pizza I Ate Last Night',
    width: 300,
    height: 300,
    colors: colors,
    legend: {
        position: 'none'
    }
});
  $('#legend li').click(function(){
      chart.setSelection([{row:$(this).data('row'),column:null}]);
    })

}

Answer 1

PieCharts 没有任何关于选择哪个切片的视觉指示，因此您必须更改图表选项并重新绘制图表以获得您想要的效果。应该这样做:

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', 5],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 6],
        ['Sausage', 3],
        ['Peppers', 5],
        ['Tomatoes', 2],
        ['Meatballs', 4],
        ['Extra Cheese', 3]
    ]);

    var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#aaaa11","#22aa99","#994499"];

    var legend = document.getElementById('legend');
    var lis = [];

    var total = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        // increment the total
        total += data.getValue(i, 1);

        // get the data
        var label = data.getValue(i, 0);
        var value = data.getValue(i, 1);


        // create the legend entry
        lis[i] = document.createElement('li');
        lis[i].setAttribute('data-row',i);
        lis[i].setAttribute('data-value',value);
        lis[i].id = 'legend_' + data.getValue(i, 0);
        lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';" ></div>' + label + ': ' + value +'</span>';

        // append to the legend list
        legend.appendChild(lis[i]);

    }

    var options = {
        title: 'How Much Pizza I Ate Last Night',
        width: 300,
        height: 300,
        colors: colors,
        legend: {
            position: 'none'
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    $('#legend li').hover(function () {
        options.slices = options.slices || {};
        // clear all slice offsets
        for (var x in options.slices) {
            options.slices[x].offset = 0;
        }
        // set the offset of the slice associated with the hovered over legend entry
        options.slices[$(this).data('row')] = options.slices[$(this).data('row')] || {};
        options.slices[$(this).data('row')].offset = 0.1;
        chart.draw(data, options);
    }, function () {
        options.slices = options.slices || {};
        // clear all slice offsets
        for (var x in options.slices) {
            options.slices[x].offset = 0;
        }
        chart.draw(data, options);
    })
    //fixing incorrect percent-values
    .each(function(i,o){$(o).append(' ('+(Math.round(1000 * $(o).data('value') / total) / 10)+'%)');});
}

请参阅 jsfiddle 中的工作示例:http://jsfiddle.net/asgallant/2JWQY/31/