當我選擇在餅圖切片我想表現出一定的切片選擇的可視化表示的

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

的扇形圖不具有任何可視指示，其中被選擇的片，所以你將不得不改變圖表的選擇和重新繪製圖表得到你想要的效果。像這樣的東西應該這樣做：

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/