2016-10-10 2 views
1

ハイチャートのチャートには複数の「ペア」があり、アレイに設定されています - ペアの1つが実際の数字で、もう1つが業界平均です。一度に1組のリンクされたハイチャートシリーズのみを表示する方法

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 

    }, 

私は、チャートがロードされたときに最初のペアが表示されている、とするとき、時間で一対のみを表示しようとしています私は1つだけ表示する必要があり、オン/オフの切り替え効果を達成することができないなどなど、次の凡例項目(ペア)最初のペアが隠され、クリックされ、そして唯一の新しいペアが示され、

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/)を切り替える方法について非常によく似た質問がありますが、トグルするデータがペアになっているものは見つかりません。

(私の例の凡例では、「平均...」メニュー項目を隠すので、リンクとして実際に動作する必要はありません)。

例:コメントで述べたようhttp://jsfiddle.net/6cL56x9r/4/

+0

'linkedTo'プロパティは2つのシリーズをリンクし、凡例の最初のもののみを表示します。それをあなたが答えを見つけた他の機能と組み合わせれば、あなたはすべて設定されるべきです。 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/

あなたがtrueにプロパティshowInLegendを設定した場合、目に見えるリンクシリーズを保つことができますが、ループ内の条件を少し変更する必要があります。

関連する問題