时间戳

首页 > 解决方案 > Highcharts 变量饼图legendItemClick 不隐藏或更新数据

javascript - Highcharts 变量饼图legendItemClick 不隐藏或更新数据

问题描述

我目前正在使用 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();

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

第二个问题是文本标题。我希望它显示新的更正值（它是标题内的 ySum 变量：{ text: block ）。我尝试设置新值，但由于某种原因它没有更新图表的数据。例如，我们有 3 个切片，每个切片的值为 10。它显示“总共 30 个”。当单击并隐藏 1 个图例项时，它应该更新 ySum 以现在显示“总共 20 个”。

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

谢谢您的帮助！

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

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

标签： javascripteventshighchartspie-chart

解决方案

要更改图表标题，您可以使用setTitle以下方法：

    legendItemClick: function(event) {
      var chart = this.series.chart

      if (this.visible) {
        // this.series.visible = false;
        ySum = ySum - event.target.options.y;
      } else {
        ySum = ySum + event.target.options.y;
      }
      chart.setTitle({
        text: ySum
      }, false, false);

      return true
    }

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

现场演示：https ://jsfiddle.net/BlackLabel/sdh1y0tw/

推荐阅读