2016-10-10 45 views
1

我有一個Highcharts的柱狀圖,有多個「對」,設置在一個數組中 - 其中一個是實際數字,另一個是行業平均數。如何一次只顯示一對鏈接的Highcharts系列

var links = { 
    'Apples': 'Apples average', 
    'Pears': 'Pears average', 
    'Oranges': 'Oranges average', 
    'Bananas': 'Bananas average' 
}; 

.......

series: [{ 
     id: 'Apples', 
     name: 'Apples', 
     color: 'rgba(0,167,184,1)', 
     data: [3.8, 8.9, 8.4], 
     pointPadding: 0.3, 
     pointPlacement: 0.2 

    }, { 
     id: 'Apples average', 
     name: 'Apples average', 
     color: 'rgba(135,28,90,1)', 
     data: [2.7, 8.1, 7.9], 
     pointPadding: 0.3, 
     pointPlacement: -0.2 

    }, 

我想一次顯示只有一對,所以當圖表加載第一對是可見的,而當下一個圖例項(對)被點擊時,第一對被隱藏,並且只示出了一對新的,等等等等

plotOptions: { 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0, 
      events: { 
       legendItemClick: function (event) { 
        var sisterSeries = this.chart.get(links[this.name]); 
        if (this.visible) { 
         sisterSeries.hide(); 
        } else { 
         sisterSeries.show(); 
        } 
       } 
      } 
     } 
    }, 

我不能達到開/關切換效果我需要顯示只有一個p空氣一次 - 我仍然需要手動點擊現有的一對隱藏它們。任何幫助,將不勝感激。

關於如何切換系列(http://jsfiddle.net/tK38J/65/)有非常類似的問題,但我找不到要切換的數據在一對中。

(在我例子的圖例中,我會隱藏'... average'菜單項,所以它們不需要實際上作爲鏈接工作)。

舉例:如在評論提到http://jsfiddle.net/6cL56x9r/4/

+0

'linkedTo'屬性將兩個系列連接在一起,並且只顯示圖例中的第一個。將其與您找到答案的其他功能相結合,您應該全部設置。 http://api.highcharts.com/highcharts/plotOptions.series.linkedTo – jlbriggs

回答

2

連接配對系列。如果只有一個主要系列應該是可見的,那麼你可以在legendItemClick事件這樣的內循環:

legendItemClick: function (event) { 
        this.chart.series.forEach(function (serie) { 
         if (serie.linkedSeries.length && this != serie) { 
         serie.setVisible(false, false); 
         } 
        }, this); 
       } 

例子:http://jsfiddle.net/6cL56x9r/11/

你可以保持連接的一系列可見,如果設置屬性showInLegend爲真,但隨後您需要稍微修改循環中的條件。