0

そこで、jQuery プラグイン「Highcharts」を使用してこの円グラフを作成しました。返されるのは、フィードされた合計の割合です。私がやりたいことは、プラグインに渡された数値を具体的に表示することです。これは可能ですか、どのように、私が持っているものはシステムへのログインを通じてブロックされていますが、このリンクは私が使用している正確なデモへのリンクです:

http://www.highcharts.com/demo/pie-legend

ソースを表示すると、プラグインについて次のように表示されます。

$(function () {
    var chart;

    $(document).ready(function () {

        // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });

});

「データ」の下には、シリーズのタイトルと値が表示されます。「Firefox」の 45.0. タイトルを表示するには {series.name} を使用するため、{series.number} のようなものだと推測していますが、これを指定するドキュメントのどこにもないため、可能かどうかはわかりません。どんな助けでも大歓迎です！

4

2 に答える 2

0

ニーズを満たすには、2 つの異なる方法があります。使用することで

  1. pointFormat
  2. ツール ヒントの書式設定。

使用するpointFormat

次のスニペットを追加します

 tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'                 
          }

デモはこちら.

使用するFormatter

コード

tooltip: {
            formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + this.point.y
            }
        }

デモはこちら.

あなたのコードでは、

tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },

交換、

 pointFormat: '{series.name}: <b>{point.percentage}%</b>'

と

 pointFormat: '{series.name}: <b>{point.y}</b>',
于 2013-01-25T07:29:00.940 に答える
0

私は実際に答えを見つけましたが、ハイチャートのドキュメントではありません。フォーマッターで疑問に思っている場合は、プラグインに渡す値を次のように参照できます。

this.point.y

全体として、私のコードは次のようになります。

       plotOptions: {
            pie: {
                 allowPointSelect: true,
                 cursor: 'pointer',
                 dataLabels: {
                      enabled: true,
                      color: '#000000',
                      connectorColor: '#000000',
                      formatter: function() {
                           return '<b>'+ this.point.name +'</b>: $'+ this.point.y +' '         + Math.round(this.percentage*10)/10 +' %';
                      }
                 }
            }
       },

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

于 2013-01-23T19:39:47.990 に答える