首页 文章

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

提问于
浏览
0

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

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

第二个问题是文本 Headers . 我希望它显示新的更正值(它是 Headers 内的ySum变量:{text:block) . 我尝试设置新值但由于某种原因它不会更新图表的数据 . 例如,我们有3个值,每个值为10 . 它显示“总共30” . 单击并隐藏1个图例项时,应将ySum更新为现在显示“20 total” .

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

谢谢您的帮助!

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

我自己想出了第一个问题(如果有其他人面对它我会留下问题):legendItemClick事件是一个可以返回布尔值的函数:你可以通过设置true =标准行为来操纵它的行为 - >它会隐藏数据系列AND重绘图表false =它什么都不做 - >类似于event.preventDefault()

1 回答

相关问题