1

谁能告诉我如何达到以下效果：

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

  1. 通过将所选切片从图表中移开，使其独立突出。
  2. 或通过在切片上绘制白色边框以显示相应切片已被选中。

有没有人做过类似的事情，如果可以，请您发布一些代码。我在这个小组和其他地方做了很多搜索，但什么也没找到。很难相信核心情节支持不了这部动画。

JS小提琴链接

Pi 图表代码是：

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}]);
    })

}
4

1 回答 1

4

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/

于 2013-10-21T01:08:57.857 回答