2017-12-26 4 views
0

ハイチャートで複数選択の縦棒グラフを作成するのに苦労しています。 私の目標は、ユーザーがグラフのカテゴリを選択/選択解除できるようにすることです。複数のカテゴリを選択するハイチャートのチャート

行動を期待:カテゴリに

  1. (すなわち - "0 - 1M")をクリックし、両方のバーは、色を変更する必要があります。カテゴリをもう一度クリックすると、色が元に戻ります。

  2. 選択した列の外部アプリ(AngularJS)に通知するにはどうすればよいですか?

私はallowPointSelect:trueを使用していますが、1つの列のみを選択し、カテゴリの両方の列は選択しません。

allowPointSelect: true, 

ここから続ける方法がわかりません。ここ

JSfiddle - http://jsfiddle.net/w7dvrkhz/9/

任意のアイデアしてください?

+0

ポイント1については、サンプルグラフのように細かく説明してください。 –

+0

np。たとえば、カテゴリ「0-1M」の列を選択すると、両方の列が黄色になります。それらをもう一度クリックすると、再び青色になります。 – badigard

答えて

1

1.このカスタム動作を簡単にplotOptions.series.point.events.clickプロパティに対してコールバック関数にプログラムすることができます。

point: { 
    events: { 
     click: function() { 
     var clickedPoint = this, 
      chart = clickedPoint.series.chart; 

     chart.series.forEach(function(s) { 
      s.points.forEach(function(p) { 
      if(p.x == clickedPoint.x) { 
       p.select(null, true); 
      } 
      }); 
     }); 
     } 
    } 
    }, 

ライブデモ:http://jsfiddle.net/kkulig/d37x5mo7/

上記のコードを使用しながら、無効にする必要がありallowPointSelect

APIリファレンス:


2.私は角について多くを知らないが、私はで使用されるイベント1番目のポイントは、現在どのポイントがあるかを確認するのに適しているようです選択された。

関連する問題