2015-05-27 76 views
0

我有圖表類型作爲花鍵只顯示一些系列在HighCharts花鍵圖表

一個highchart在此圖表中,我有大約36個系列的數據,但問題是,示出了在一個單一的圖表36系列是非常困難瞭解並且幾乎所有人都有幾乎相似的數據。

我的問題是,我們怎麼能只顯示選定的或預先定義的系列,而不是顯示所有系列的一次,這是由highcharts默認情況下完成的。

而且,我不想改變我的API,它是獲取JSON數據,有沒有辦法從前端自己做呢?

$(function(){ 
 
$('#highchart_1').highcharts({ 
 
\t \t \t chart:{ 
 
\t \t \t \t type:'spline', 
 
\t \t \t \t zoomType: 'x' 
 
\t \t \t }, 
 
\t \t \t title: { 
 
\t \t \t \t text: 'Pregnant Women Overview', 
 
      x: -20 //center 
 
     }, 
 
     subtitle: { 
 
     \t text: 'Source:something.com', 
 
     \t x: -20 
 
     }, 
 
     xAxis: { 
 
     \t categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
     }, 
 
     yAxis: { 
 
     \t title: { 
 
     \t \t text: 'Pregnant Women (No.)' 
 
     \t }, 
 
     \t plotLines: [{ 
 
     \t \t value: 0, 
 
     \t \t width: 1, 
 
     \t \t color: '#808080' 
 
     \t }] 
 
     }, 
 
     tooltip: { 
 
     \t valueSuffix: '' 
 
     }, 
 
     legend: { 
 
     \t layout: 'vertical', 
 
     \t align: 'right', 
 
     \t verticalAlign: 'middle', 
 
     \t 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 
 
] 
 
} 
 
] 
 
    }); 
 
}); \t
<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

您可以設置'visible:false'來初始隱藏某些系列。見http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-visible/ – Phil

+0

沒有返工的API什麼辦法? –

+1

當然,請使用['Series.hide()'](http://api.highcharts.com/highcharts#Series.hide)。它也不會是難以獲取之後,但它注入Highcharts – Phil

回答

2

我只想將其注入Highcharts前操縱JSON數據。

假設你的JSON API返回序列數據的陣列...

// 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; 
    } 
} 
+0

之前這工作就像一個魅力添加'visible'標誌到JSON數據.. –

2

如何禁用的所有系列:

plotOptions: { 
    series: { 
    visible: false 
    } 
} 

然後在加載事件顯示所需系列?像這樣:

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

其中index是應該顯示的系列索引。

+0

我收到此錯誤:無法讀取屬性「秀」的未定義 –

+0

@RohitBandooni你不會使用'index'。例如,如果你想索引'0'來顯示,你可以使用'this.series [0] .show()' – Phil

+0

@Phil我也是這樣做的:) –