jquery - ハイチャート パイ データラベルの内側と外側

Question

円の内側と外側にデータラベルを付けた円グラフが必要です。負の距離を指定すると、円の内側にラベルが表示されます。しかし、私はそれが内側と外側に欲しいです。外側にパーセンテージを表示し、内側にポイントの合計を表示したい。

Answer 1

二重のデータラベルを設定する可能性はありませんが、回避策を使用できます。これは完全ではありませんが、おそらく役立つでしょう。したがって、useHTML を設定すると、フォーマッターで 2 つの div が返されます。最初は適切なデータラベル (外側) で、2 つ目は内側です。次に、各 div の id を一意として定義するカウンターで id を設定すると、必要なものだけが適切な CSS に設定されます。位置 1 のデータラベルの例は、ここにあります: http://jsfiddle.net/4RKF4/

$(function () {
var chart,
    counter = 0;
$(document).ready(function() {
    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: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    useHTML:true,
                    formatter: function() {
                        counter++;
                        return '<div class="datalabel"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div><div class="datalabelInside" id="datalabelInside'+counter+'"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div>';
                    }
                }
            }
        },
        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]
            ]
        }]
    });
});

});

CSS スタイル:

.datalabelInside {
position:absolute;
}

 #datalabelInside1 {
color:#fff;
left:-150px;
}