javascript 通过 highcharts 中的配置禁用系列

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16468534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 04:48:32  来源:igfitidea点击:

Disable series through configuration in highcharts

javascripthighcharts

提问by cfs

I have a line chart with several series. When viewed all at once the chart is confusing, so I would like to have certain series hidden initially.

我有一个包含多个系列的折线图。当一次查看所有图表时,图表令人困惑,因此我希望最初隐藏某些系列。

I know I can programmatically turn off series, but is there a way to do this when initializing the chart?

我知道我可以以编程方式关闭系列,但是在初始化图表时有没有办法做到这一点?

回答by arcseldon

Believe there is a configuration option for this.

相信有一个配置选项。

Within Series, set "visible = false"

在系列中,设置“visible = false”

The legend will still list the series but greyed out. And the series itself will be hidden in the chart upon initial display.

图例仍会列出该系列,但会变灰。并且系列本身将在初始显示时隐藏在图表中。

Example configuration:

示例配置:

series: [{
            name: 'HiddenByDefault',
            legendIndex: 1,
            visible: false,
            color: '#4572A7',
            type: 'spline',
            data: [a, b, c],
            tooltip: {
                valueSuffix: ' ¥'
            }

        }

回答by Mayank Jaiswal

You can achive this by hiding all the series that you dont want to see just after the chart has completed loading.

您可以通过在图表完成加载后隐藏您不想看到的所有系列来实现此目的。

Fiddle : http://jsfiddle.net/bHDLX/

小提琴:http: //jsfiddle.net/bHDLX/

Code:

代码:

$(function () {
// create the chart
$('#container').highcharts({
    chart: {
        events: {
            load: function(event) {
                alert ('Chart loaded');
                this.series.forEach(function(d,i){if(d.options.id==1)d.hide()})
            }
        }        
    },
    xAxis: {
    },

    series: [{
        animation: false,
        id : 1,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
    },
            {
        animation: false,
        id : 2,
        data: [29.9, 144.0, 176.0, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
    },{
        animation: false,
        id : 3,
        data: [ 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]     
    }]
});

});

});