web-dev-qa-db-ja.com

ハイチャートのツールチップに2つの異なるフォーマッタを使用できますか？

名前付きの値を使用する2つのデータ系列を含むハイチャートテーブルがあります。 1つのシリーズのツールチップで、シリーズのデータ​​ポイントを参照したいと思います。したがって、この回答の解決策： 同じグラフィックの各曲線のハイチャートで異なるフォーマッタを使用する方法は？ は役に立ちません。 tooltipTextだけでなく、フォーマッターも必要です。

一つには：

formatter: function() {
    return this.x + ': ' + this.series.name +
    '<br> $' + Highcharts.numberFormat(this.y, 0);
     }

そして他のために：

formatter: function() {
    return 'In ' + this.x + ' the median value was' + this.median + 
    'and the total $' + Highcharts.numberFormat(this.y, 0);                        
 }
javascripthighcharts
16
Amanda

フォーマッター内でthisはフォーカスされたシリーズを参照し、フォーマッター内にif/elseを追加して、次のようにそれぞれの文字列を返すことができます。

tooltip: {
    shared: false,
    formatter: function() {
        var text = '';
        if(this.series.name == 'MSFT') {
            text = this.x + ': ' + this.series.name +
                   '<br> $' + Highcharts.numberFormat(this.y, 0);
        } else {
            text = 'In ' + this.x + ' the median value was' + this.median +
                   'and the total $' + Highcharts.numberFormat(this.y, 0);
        }
        return text;
    }
}

デモ

31
Ricardo Alvaro Lohmann

各シリーズのツールリップフォーマッターを簡単に定義できます-ここを参照してください： http://api.highcharts.com/highcharts/plotOptions.series.tooltip

{
  tooltip: {
          shared: true
  },
  series: {
     name: 'some series name',
     data: mydata,
     tooltip: {
        valueSuffix: ' bar'
     }
  }
}

例： http://jsfiddle.net/28qzg5gq/

2
Martin