问题
I have a highchart with chart type as spline
In this chart, I have about 36 series data, but the problem is that showing 36 series in one single chart is really difficult to understand and moreover almost all have almost similar data.
My question is that how can we show only selected or pre-defined series instead of showing all series at once, which is done by default by highcharts.
Also, I do not want to change my API which is fetching the JSON data, is there any way to do it from front end itself ?
$(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>回答1:
I would just manipulate the JSON data before injecting it into Highcharts.
Assuming your JSON API returns the array of series data...
// 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;
}
}
回答2:
How about disabling all of the series:
plotOptions: {
series: {
visible: false
}
}
And then in load event showing required series? Like this:
chart: {
events: {
load: function() {
this.series[index].show();
}
}
}
Where index is series index which should be displayed.
来源：https://stackoverflow.com/questions/30473296/show-only-some-series-in-highcharts-spline-chart