Question

我的高清图中有3个系列，我想通过点击图例使一个系列固定（用户）无法禁用/隐藏它。

另外两个我想作为单选按钮工作，即用户可以选择其中一个显示，现在我能够实现这一点，但现在我想要一个单选按钮旁边的那两个图例符号用户可以选择。

legend should be like this. 并且单选按钮应该切换系列。工作代码（没有单选按钮和图例分配）是：

drawChart(data1, data2, data3) {
    let chart = Highcharts.chart("container", {
            chart: {
                zoomType: "xy"
            },
            title: {
                text: null
            },
            plotOptions: {
                series: {
                    events: {
                        show: function () {
                            let chart = this.chart,
                                series = chart.series,
                                i = series.length,
                                otherSeries;
                            while (i--) {
                                if (i != 0)
                                    otherSeries = series[i];
                                if (otherSeries != this && otherSeries.visible) {
                                    otherSeries.hide();
                                }
                            }
                        },
                        legendItemClick: function () {
                            if (this.visible) {
                                return false;
                            }
                        }
                    }
                }
            },

            series: [{
                name: "series1",
                data: data1
            }, {
                name: "series2",
                data: data2
            }, {
                name: "series3",
                data: data3,
                visible: false
            }]

        }

Answer 1

您需要设置plotOptions并设置showCheckbox: true

plotOptions: {
    line: {
        marker: {   enabled: false  }
    },
    turboThreshold: 0,
    series: {
        cursor: 'pointer',
        showCheckbox: true,
        events: {
            checkboxClick: function (event) {
                if (event.checked) {
                    this.show();
                    this.legendSymbol.show();
                } else {
                    this.hide();
                    this.legendSymbol.hide();
                }
            },
            legendItemClick: function() {
                return false;
            }
        }
    }
},

默认情况下，复选框位于系列标签旁边，但我们可以根据需要覆盖它，这是一个可能有帮助的fiddle！它只是一个指针，您可以根据需要进行自定义。

如何在highchart图例符号中添加单选按钮

1 个答案: