17

折れ線グラフを作成しています。線のポイントをクリックすると、このポイントに関するデータを含むポップアップが表示されます。私が解決しようとしている問題は、ID、このポイントに関連付けられたシリーズなどを取得することです。

これが私のコードです:

plotOptions: {
      column: {
        pointWidth: 20
      },

      series: {
        cursor: 'pointer',
        events: {
          click: function(event) {
            requestData(event.point);
          }
        }
      }

私は試した

requestData(this.point)

、

requestData(this.point.id)

また、それは動作しません。

ポイントのIDを取得するにはどうすればよいですか?

どうもありがとう。

4

6 に答える 6

16

ドキュメントによると、event.point はグラフ上の最も近いポイントへのポインターを保持します。

だから私event.pointはコンソールに書き込み、利用可能なものを確認します。

console.log(event.point);

ドキュメントから：

click: シリーズがクリックされたときに発生します。this キーワードは、シリーズ オブジェクト自体を参照します。1 つのパラメータ event が関数に渡されます。これには、Highcharts のベースとして使用されるライブラリに応じて、jQuery または MooTools に基づく一般的なイベント情報が含まれます。さらに、event.point は、グラフ上の最も近いポイントへのポインターを保持します。

ドキュメントの例に基づく例: http://jsfiddle.net/5nTYd/

ポイントをクリックして、コンソールを確認します。

于 2010-08-19T18:10:18.510 に答える
11

これを行うには、3つのオブジェクトを系列データ配列に渡し、クリックしてオブジェクトのconfig属性から引き出します。

したがって、シリーズデータは次のように作成できます。

 series: [{
  name: 'Example',
  yAxis: 0,
  type: 'spline',
  data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]

上記のデータ属性では、1番目の要素は日付（x）、2番目の要素は別のデータポイント（y）、3番目はそのデータオブジェクトを表すオブジェクトのIDです。この「z」はグラフには表示されませんが、構成配列の3番目の要素として表示されます。例：plotOptionsポイント属性を使用してクリックをキャプチャすると、オブジェクトのIDはthis.config[2]としてアラートに含まれます。

  plotOptions: {
    series: {
      cursor: 'pointer',
      point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' +  this.series.name + ' ID: ' + this.config[2])}}}
     }
   },
于 2011-04-21T22:17:19.693 に答える
3

チャートで選択したポイントの「ID」を返すには、「X」値を使用します。

plotOptions: {
    series: {
        cursor: 'pointer',
        events: {
            click: function(event) {
                   // Log to console
                console.log(event.point);
                alert(this.name +' clicked\n'+
                      'Alt: '+ event.altKey +'\n'+
                      'Control: '+ event.ctrlKey +'\n'+
                      'Shift: '+ event.shiftKey +'\n'+
                      'Index: '+ event.point.x);
            }
        }
    }
},

ここで例を参照してください: http://jsfiddle.net/engemasa/mxRwg/

于 2013-05-10T14:33:24.470 に答える
1

私は同じ問題を抱えていました...私が正しく理解していれば。私の解決策は、シリーズのIDを取得することです...それが役立つかどうかを確認してください...

plotOptions{
 series:{
  cursor: 'pointer',
    events: {
      click: function(event) {
        console.log(event.point.series.userOptions.id);
      }
    }
  }
于 2015-01-22T08:47:14.810 に答える
0

検索でこの古い投稿を見つけました==> Highchartsの「トレンドライン」[例：「line-time-series」]チャートをクリックするとポイントにマーカーを追加します[描画された線自体の任意の場所をクリックすると]。あまり多くのコードを表示することなく、

  cursor: 'pointer',
                    point: {
                      events: {
                             click: function(e) {
                                alert("X("+this.x+"),Y("+this.y+")");
                                }//click
                          }//events
                           }//point

詳細をご希望の場合は、喜んで提供させていただきます。

于 2013-02-26T15:04:12.707 に答える