1

Highcharts ライブラリを使用して、ドーナツ グラフ タイプに取り組んでいます。

下の画像でわかるように、内側のデータ ラベルの一部が重なっています。パラメータ「距離」で遊んでいますが、これは修正されません。

以下のコードを添付してください。

ここに画像の説明を入力

// Create the chart
    $(container).highcharts({
        chart: {
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        exporting: {   
            buttons: {
                contextButton: {
                    symbol: 'url(/icon-turn-down.png)'
                }
            }
        },
        title: {
            text: _title, 
            margin: 50
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            formatter: function() {
                var s = this.point.name.split('.');                
                if (s.length == 1) {
                    return this.y > 1? '<b>'+this.point.name+':</b> '+Highcharts.numberFormat(this.point.y) : null;
                }
                return this.y > 1? s[0]+'<br /><b>'+$.trim(s[1])+':</b> '+Highcharts.numberFormat(this.point.y) : null;
            }
        },
        series: [{
            name: '',
            data: innerData,
            size: '80%',
            dataLabels: {
                formatter: function() {
                    return this.y > 0 ? this.point.name : null;
                },                 
                color: 'white',
                distance: -50
            }
        }, {
            name: '',
            data: outerData,
            size: '100%',
            innerSize: '80%',
            dataLabels: {
                formatter: function() {
                    var s = this.point.name.split('.');  
                    if (s.length == 1) {
                         return this.y > 1 ? '<b>'+ this.point.name+':</b> '+ Highcharts.numberFormat(this.point.y) : null ;
                    }                   
                    s = this.point.name.substring(this.point.name.indexOf(".")+2);
                    return this.y > 1 ? '<b>'+ s+':</b> '+ Highcharts.numberFormat(this.point.y):  null;
                },
                style: {
                    fontSize: "10px",                       
                    fontColor: "#000000"
                }
            }
        }]
    });
4

2 に答える 2

2

最後に、「startangle」属性で遊んでいる解決策を見つけました。

     series: [{
                name: '',
                data: innerData,
                startAngle:110, 
                size: '80%',
                dataLabels: {
                    formatter: function() {                    
                        return this.y > 0 ? this.point.name : null;
                    },                 
                    color: 'white',
                    distance: -45
                }, {
...
于 2013-08-28T11:54:15.787 に答える
1

距離パラメーターは各ポイントに適用できず、一般的なものだけなので、頭に浮かんだことだけが各データラベルで反復され、translate() 関数を使用するか、フォーマッターを使用し、CSS クラスを適用し、dhten が各要素に top/left パラメーターを使用します。ただし、例をフィドルとして再作成すると役立ちます。

于 2013-08-23T11:40:45.757 に答える