当我在饼图中选择一个切片时，我想显示切片选择的某种可视化表示形式

When I select a slice in the Pie Graph I want to show some kind of Visual representation of the Slice selection

本文关键字：切片 选择 显示 表示 可视化 一个      更新时间：2023-09-26

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

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

  1. 通过将所选切片移离图形，使其独立脱颖而出。
  2. 或通过在切片上绘制白色边框以显示选择了相应的切片。

有没有人做过类似的事情，如果是这样，你能发布一些代码吗？我在这个小组和其他地方做了很多搜索，但无法找到任何东西。很难相信核心剧情支撑不住这一点动画。

JS小提琴链接

圆周率图代码为： 

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

饼图没有任何视觉指示选择了哪个切片，因此您必须更改图表选项并重新绘制图表以获得所需的效果。 像这样的事情应该这样做：

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/

相关文章：