39

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

これがjsFiddleのサンプルです

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

  1. ツールチップ: pointFormat: '{series.name}: {point.percentage}% ' つまり

    ブラウザ共有: some-percentage-value

見せたい：

Browser share: 40 (data value instead of percentage)

2. 次は、円グラフの各セクションの表示テキストです。n小数点以下の桁数がグラフの見栄えを悪くしているのがわかります。

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

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

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

4

4 に答える 4

65

書式文字列を使用して、数値と日付の書式を設定できます。

x 小数点以下の桁数

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

于 2013-08-06T10:16:19.060 に答える
64

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) +' %';
}
于 2012-09-27T19:48:53.500 に答える
2

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

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

うまくいかないthis.points[i].point場合は試してくださいthis.point

于 2013-07-10T03:25:31.493 に答える