HighCharts从图例中禁用某些系列名称

时间:2019-05-07 09:55:08

标签: javascript highcharts legend series ng-hide

我正在使用HighChart,我想禁用图例,因为给定的示例中有3个图例(Test1,Test2,Test3),我只希望只显示一个(Test2),而其他的则禁用,

this.options1 =
{
    chart:
    {
        type: 'area' // area areaspline bar column line spline
    },
    title:
    {
        text: 'Fruit Consumption'
    },
    xAxis:
    {
        categories: ['01-01-2019', '02-01-2019', '03-01-2019','04-01-2019', '05-01-2019', '06-01-2019','07-01-2019', '08-01-2019', '09-01-2019','10-01-2019', '11-01-2019', '12-01-2019','13-01-2019', '14-01-2019', '15-01-2019','16-01-2019', '17-01-2019', '18-01-2019','19-01-2019', '20-01-2019', '21-01-2019','22-01-2019', '23-01-2019', '24-01-2019']
    },
    yAxis:
    {
        title: false
    },
    series:
    [{
        name: 'Test1',
        data: [1000, 5000, 10000,5500, 7500, 3940,5500, 7500, 3940,1000, 5000, 10000,5500, 7500, 3940,1000, 5000, 10000,1000, 5000, 10000,5500, 7500, 3940]
    },
    {
        name: 'Test2',
        data: [5500, 7500, 3940,1000, 5000, 10000,1000, 5000, 10000,5500, 7500, 3940,1000, 5000, 10000,5500, 7500, 3940,5500, 7500, 3940,1000, 5000, 10000]
    },
    {
        name: 'Test3',
        data: [2200, 3500, 1940,9000, 1000, 5000,7000, 3000, 2000,10500, 1500, 2940,5000, 1000, 1000,2500, 4500, 5940,6500, 9500, 8940,7000, 6000, 5000]
    }
  ]
}
var myChart1 = HighCharts.chart('container1',this.options1);

此代码的输出为

enter image description here

我想要这样的预期输出

enter image description here

我尝试了什么

series: [{
            showInLegend: false,
            name: 'Series',
            data: value                
        }]

但是它隐藏了图例。 请帮助...

1 个答案:

答案 0 :(得分:1)

您需要为第一个和第三个系列禁用visible属性:

series: [{
        name: 'Test1',
        visible: false,
        data: [...]
    },
    {
        name: 'Test2',
        data: [...]
    },
    {
        name: 'Test3',
        visible: false,
        data: [...]
    }
]

实时演示: http://jsfiddle.net/BlackLabel/qtmh975p/

API参考: https://api.highcharts.com/highcharts/series.area.visible