Question

伙计我的应用程序中有一个饼图，是我从UI部门获得的。现在点击图例后我想更改＆＃34;标题＆＃34;中显示的值。饼图。

以下是给我的图表代码：

$('#performancePieChart').highcharts({
    chart: {
        backgroundColor: '#f5f7f7', style: { fontFamily: 'Roboto, Sans-serif', color: '#aeafb1' }
    },
    title: {
        style: { color: '#838589' }, text: '<b>' + myDepartmentWiseSeriesCount + '</b><br>Issues', align: 'center', verticalAlign: 'middle', y: 0, x: -185
    },
    tooltip: {
        headerFormat: '{point.y:,.1f}<br/>', pointFormat: $('#performancePieChart').data('tooltip')
    },
    legend: {
        itemStyle: { color: '#838589' }, symbolWidth: 10, symbolHeight: 5, itemWidth: 170, symbolRadius: 0,
        itemMarginBottom: 10, backgroundColor: '#f5f7f7', align: 'right', borderWidth: 0, width: 340, height: 250, x: 0, y: 80
    },
    plotOptions: {
        pie: {
            allowPointSelect: false, cursor: 'pointer', dataLabels: { enabled: false, }, 
            colors: ['#cc6ae5', '#6c51d4', '#318fe0', '#31cee0', '#80d343', '#856aed', '#5272e6', '#31b0e0', '#31e0b1',
            '#d3cb43'], showInLegend: true, center: ['50%', '50%']
        },
    },
    series: [{
        type: 'pie', name: 'Department Issues', innerSize: '70%',
        data: myDepartmentWiseSeries
    }]
});

此处myDepartmentWiseIssueCount＆amp; myDepartmentWiseSeries是具有＆＃34;问题数量的动态变量＆＃34;和＆＃34;部门名称＆＃34;分别。

现在点击图例按钮后，我想更新myDepartmentWiseSeriesCount

中的值

以下是我的图表参考图片： enter image description here

现在，Administration和Application Development部门的值为＆＃34; 1＆＃34;并且Administrative Process的值为＆＃34; 2＆＃34;总数＆＃34; 4＆＃34;显示在饼图的中心。

此外，当我点击任何图例时，该饼图部分会自动消失，但值为＆＃34; 4＆＃34;不会改变。我也想更新中心值。例如，如果我关闭Administrative Process（值为2），则饼图中心的值应更改为剩余值（4-2 = 2）。

我该怎么做？我可以调用特定的图例事件然后更新值吗？

Answer 1

上述答案都没有奏效。这就是我为解决问题所做的工作：

   plotOptions: {
        pie: {
            allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false, },
            colors: ['#cc6ae5', '#6c51d4', '#318fe0', '#31cee0', '#80d343', '#856aed', '#5272e6', '#31b0e0', '#31e0b1',
            '#d3cb43'], showInLegend: true, center: ['50%', '50%'], point: {
                events: {
                    legendItemClick: function () {
                      ..code here...
                    } } },  }, }

Answer 2

看看plotOptions.series.events.legendItemClick。这将使您可以访问被单击的项目，并允许您运行其他代码。

Answer 3

希望this示例能够正常工作。

title:{
        useHTML:true,
        text: '<div id="title">default title</div>'
    },
    plotOptions: {
        series: {
            events: {
                legendItemClick: function(event) {
                    console.log(this);
                    $('#title').html(this.name);
                }
            }
        }
    },

Highcharts：如何在饼图的图例点击上执行操作？

3 个答案: