Place text in center of pie chart - Highcharts

后端 未结 7 665
-上瘾入骨i
-上瘾入骨i 2020-12-08 00:57

I would like to place a title in the center of a pie/donut chart in HighCharts.

I don\'t see anything in the chart options that would directly enable this, so I\'m t

7条回答
  •  半阙折子戏
    2020-12-08 01:40

    The best solution is to rely on series center, instead of plotHeight or plotWidth.

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        plotOptions: {
            pie: {
                //innerSize: '60%'
            }
        },
        title: {
            text: ''
        },
        series: [{
            data: [
                ['Firefox', 2262],
                ['IE7', 3800],
                ['IE6', 1000],
                ['Chrome', 1986]
                ]}]
    },
    
    function(chart) { // on complete
        var textX = chart.plotLeft + (chart.series[0].center[0]);
        var textY = chart.plotTop  + (chart.series[0].center[1]);
    
        var span = '';
        span += 'Upper
    '; span += 'Lower'; span += '
    '; $("#addText").append(span); span = $('#pieChartInfoText'); span.css('left', textX + (span.width() * -0.5)); span.css('top', textY + (span.height() * -0.5)); });

    Working demo: http://jsfiddle.net/4dL9S/

提交回复
热议问题