在 HighCharts 样条图中仅显示部分系列

Question

我有一张图表类型为样条曲线的图表

这张图我大概有36个系列的数据，但是问题是36个系列在一张图上真的很难看懂，而且几乎都是差不多的数据。

我的问题是，我们如何才能只显示选定的或预定义的系列，而不是一次显示所有系列，这是 highcharts 默认完成的。

此外，我不想更改正在获取 JSON 数据的 API，有什么方法可以从前端本身做到这一点吗？

$(function(){
$('#highchart_1').highcharts({
   chart:{
    type:'spline',
    zoomType: 'x'
   },
   title: {
    text: 'Pregnant Women Overview',
            x: -20 //center
        },
        subtitle: {
         text: 'Source:something.com',
         x: -20
        },
        xAxis: {
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
         title: {
          text: 'Pregnant Women ( No. )'
         },
         plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
         }]
        },
        tooltip: {
         valueSuffix: ''
        },
        legend: {
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'middle',
         borderWidth: 0
        },
        series:[
{
name: 1000,
data: [7,4,1,0,0,1,3,6,2,2,8,7]
},
{
name: 1001,
data: [6,10,1,1,0,0,0,2,3,2,2,5]
},
{
name: 1002,
data: [
0,
0,
35,
0,
1,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 1003,
data: [
2,
1,
4,
0,
0,
1,
1,
1,
0,
4,
4,
6
]
},
{
name: 1005,
data: [
0,
0,
0,
15,
0,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 1006,
data: [
8,
8,
3,
2,
1,
0,
2,
2,
1,
2,
1,
5
]
},
{
name: 1007,
data: [
8,
9,
0,
1,
0,
1,
2,
1,
2,
7,
1,
2
]
},
{
name: 1008,
data: [
3,
4,
4,
0,
0,
1,
3,
0,
2,
4,
3,
6
]
},
{
name: 1009,
data: [
6,
6,
6,
0,
0,
0,
0,
1,
2,
0,
10,
8
]
},
{
name: 1011,
data: [
0,
0,
4,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 1012,
data: [
5,
7,
11,
3,
0,
0,
0,
0,
2,
1,
5,
7
]
},
{
name: 1013,
data: [
4,
4,
1,
0,
0,
0,
0,
0,
3,
3,
4,
6
]
},
{
name: 1015,
data: [
2,
6,
53,
0,
0,
0,
0,
0,
0,
1,
2,
0
]
},
{
name: 1016,
data: [
12,
8,
0,
1,
0,
0,
1,
2,
5,
1,
6,
7
]
},
{
name: 1017,
data: [
0,
1,
25,
0,
2,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 1019,
data: [
7,
9,
6,
7,
0,
0,
0,
1,
2,
1,
5,
11
]
},
{
name: 1020,
data: [
0,
2,
0,
9,
2,
0,
0,
0,
0,
0,
2,
0
]
},
{
name: 1021,
data: [
0,
4,
1,
2,
0,
0,
1,
0,
0,
3,
2,
2
]
},
{
name: 1022,
data: [
0,
0,
1,
0,
20,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 1025,
data: [
5,
2,
9,
0,
1,
2,
6,
1,
4,
1,
6,
4
]
},
{
name: 1026,
data: [
1,
0,
1,
12,
0,
1,
0,
2,
0,
1,
0,
0
]
},
{
name: 1027,
data: [
0,
2,
18,
2,
0,
0,
0,
0,
0,
0,
1,
0
]
},
{
name: 1028,
data: [
0,
1,
0,
1,
0,
0,
0,
3,
0,
1,
0,
0
]
},
{
name: 1029,
data: [
0,
0,
17,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
{
name: 1030,
data: [
1,
1,
5,
0,
2,
0,
2,
1,
0,
1,
0,
2
]
},
{
name: 1031,
data: [
5,
4,
1,
2,
0,
1,
2,
0,
6,
2,
5,
2
]
},
{
name: 1032,
data: [
4,
7,
4,
0,
0,
2,
1,
2,
2,
0,
3,
1
]
},
{
name: 1033,
data: [
5,
2,
19,
1,
1,
0,
0,
1,
3,
1,
6,
4
]
},
{
name: 1034,
data: [
8,
2,
8,
1,
0,
2,
1,
0,
3,
0,
5,
6
]
},
{
name: 1035,
data: [
11,
6,
3,
0,
0,
0,
1,
3,
3,
3,
2,
13
]
},
{
name: 1036,
data: [
0,
3,
7,
0,
0,
0,
1,
1,
0,
4,
0,
3
]
},
{
name: 1039,
data: [
4,
1,
2,
0,
1,
0,
1,
2,
1,
1,
0,
3
]
},
{
name: 5000,
data: [
1,
1,
0,
2,
4,
0,
0,
0,
0,
0,
1,
1
]
},
{
name: 6000,
data: [
0,
0,
1,
4,
1,
0,
0,
0,
0,
0,
0,
0
]
}
]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<body>
  <div id="highchart_1"></div>
  </body>

Answer 1

我会在将 JSON 数据注入 Highcharts 之前对其进行操作。

假设您的 JSON API returns 序列数据数组...

// var series = getSeriesDataViaAjax();
var showTheseIndexes = [0,2,4];

for (var i = 0; i < series.length; i++) {
    if (showTheseIndexes.indexOf(i) === -1) {
        series[i].visible = false;
    }
}

Answer 2

如何禁用所有系列：

plotOptions: {
  series: {
    visible: false
  }
}

然后在加载事件中显示所需的系列？像这样：

chart: {
  events: {
    load: function() {
      this.series[index].show();
    }
  }
}

其中index是应该显示的系列索引。

在 HighCharts 样条图中仅显示部分系列

Show only some series in HighCharts spline chart

javascript

charts

highcharts