Question

我目前正在使用HighCharts变量饼图。我想为图例点击添加更多功能，所以我添加了一个单独的legendItemClick事件来执行两件事：它的行为应类似于默认行为（不这样做），而且还应纠正甜甜圈内部的文本值，这也可以不起作用。

以下是一些可使用的代码：

            this._chart = Highcharts.chart(this.$.chartsContainer, {
                title: {
                    text: '<div style="font-size: 30px; font-weight:600;">' + ySum + '</div><div>Total demands</div>',
                    align: 'center',
                    verticalAlign: 'middle',
                    useHTML: true,
                    style: {
                        'font-size': '16px',
                        'font-weight': 'normal',
                        'text-align': 'center',
                        'text-transform': 'inherit'
                    },
                    x: -2,
                    y: -27,
                },
                colors: ['#315674', '#006281', '#006D81', '#00BFE2', '#53A1B4', '#4FB4B5', '#00E8D2', '#FFC35F', '#9ECBD6'],
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: false },
                        showInLegend: true,
                        style: {'border-radius': '15px', 'font-weight': 'normal'},

                    },
                    variablepie: {
                        name: '',
                        borderWidth: 5, borderColor: 'white', minPointSize: 16,
                        color: 'white', innerSize: '60%',
                        point: {
                            events: {
                                legendItemClick: function(event) {
                                    console.log(event);
                                    if (this.visible) {
                                       this.series.visible = false;
                                        ySum = ySum - event.target.options.y;
                                    } else {
                                        ySum = ySum + event.target.options.y;
                                    }
                                }
                            }
                        }
                    },
                },
                tooltip: {
                    useHTML: true,
                    headerFormat: '<small>{point.y}</small><table>',
                    pointFormat: '',
                    footerFormat: ''
                },
                series: [{
                    type: 'variablepie',
                    data: ySerie,
                },
                ]
            });
            this.reflowChart();

我尝试通过其visible属性隐藏单击的序列数据，但这不能正常工作，因为它隐藏了单击的数据，但不会重新绘制图表以再次形成一个完整的圆圈（如果您知道我在说什么））。

第二个问题是文本标题。我希望它显示新的校正后的值（它是标题内部的ySum变量：{text：block）。我尝试设置新值，但是由于某些原因它不会更新图表数据。例如，我们有3个价值10的切片。它显示“总共30个”。单击并隐藏1个图例项后，它将更新ySum，以现在显示“总计20”。

因此，简而言之，我需要帮助 1）如何正确隐藏和显示单击的图例系列数据 2）使文本属性ySum相应地更新其值

谢谢您的帮助！

-------------------更新-----------------

我一个人解决了第一个问题（不过，如果有人遇到这个问题，我将不予理会）： legendItemClick事件是一个可以返回布尔值的函数：您可以通过设置来操纵其行为 true =标准行为->它会隐藏数据系列并重绘图表 false =它什么都不做->与event.preventDefault（）类似

Answer 1

要更改图表标题，您可以使用<div class="md-overlay"></div>方法：

setTitle

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle

实时演示：https://jsfiddle.net/BlackLabel/sdh1y0tw/

Highcharts变量Pie legendItemClick不会隐藏或更新数据

1 个答案: