1. ホーム
  2. javascript

[解決済み] highchartsシリーズに追加データを設定する

2022-09-05 08:07:01

質問

チャートの'tooltip'に表示するための追加データをシリーズオブジェクトに渡す方法はありますか?

例えば

 tooltip: {
     formatter: function() {
               return '<b>'+ this.series.name +'</b><br/>'+
           Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
     }

ここでは、シリーズにseries.name、this.x & this.yを使用することしかできません。

事前にありがとうございます。

どのように解決するのですか?

はい、以下のようにシリーズオブジェクトを設定し、各データポイントをハッシュとすれば、余分な値を渡すことができます。

new Highcharts.Chart( {
    ...,
    series: [ {
        name: 'Foo',
        data: [
            {
                y : 3,
                myData : 'firstPoint'
            },
            {
                y : 7,
                myData : 'secondPoint'
            },
            {
                y : 1,
                myData : 'thirdPoint'
            }
        ]
    } ]
} );

ツールチップでは、渡されたオブジェクトの "point" 属性を介してアクセスすることができます。

tooltip: {
    formatter: function() {
        return 'Extra data: <b>' + this.point.myData + '</b>';
    }
}

完全な例はこちら。 https://jsfiddle.net/burwelldesigns/jeoL5y7s/