web-dev-qa-db-ja.com

ツールチップをカスタマイズし、数値を小数点以下2桁のハイチャートにフォーマットします

Highchartsグラフを使用して円グラフを表示しています。パーセント値の代わりに、シリーズ名とともに実際のdataフィールドを表示するようにツールチップを変更したいと思います。

jsFiddleのサンプル

上記のサンプルを確認すると、2つのことがわかります

  1. ツールチップは次のとおりです：pointFormat： '{series.name}： {point.percentage}％'すなわち.

    ブラウザ共有：パーセント値

見せたい：

Browser share: 40 (data value instead of percentage)

2.次は、パイの各セクションの表示テキストです。 nの小数を見ると、グラフが非常にtheいように見えます。

ツールチップで使用されるpercentageDecimals: 1など、小数点以下2桁までの数字のみを表示したい。

私は、オブジェクトの配列を返すseries.dataのような第1のいくつかのことを試しました。また、series.data [0]。しかし、これまでのところ成功していません

これらの両方を行うにはどうすればよいですか？

highcharts
34
DarkKnightFan

ツールチップpointFormatを_pointFormat: '{series.name}: <b>{point.percentage}%</b>',_から_pointFormat: '{series.name}: <b>{point.y}%</b>',_に変更することで、代わりにデータ値を表示するように変更できます

フォーマッタでHighcharts.numberFormat()関数を次のように使用すると、数値を丸めることができます。

_formatter: function() {
    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
_
57
Suhail Patel

Format Strings を使用して、数値と日付をフォーマットできます。

x 10進数の場所

JSFiddleを表示

// point.percentage = 29.9345816
pointFormat: '{point.percentage:.0f}%' // returns: `30%` - (rounds to nearest)
pointFormat: '{point.percentage:.1f}%' // returns: `29.9%`
pointFormat: '{point.percentage:.2f}%' // returns: `29.93%`
pointFormat: '{point.percentage:.3f}%' // returns: `29.935%`

千の区切り

JSFiddleを表示

// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`

ドキュメントの詳細を読む：

ドキュメント：http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

56
Anil

ツールチップフォーマッタに関する詳細な説明はこちら http://api.highcharts.com/highcharts#tooltip.formatter

this.point (not shared) / this.points[i].point (shared)

this.points[i].point if this.point動作しませんでした

2
chenchun

実際のデータ値を表示する最も簡単な方法は、フォーマッター関数を省略することです。ツールチップはデフォルトで実際のデータを表示します。

0
philellsworth