javascript - 将文本添加到饼图高位图的中心

Question

我在将文本添加到饼图的中心后具有特定的字体、字体大小和字体颜色。如何使用 highcharts 对下面的代码执行此操作？

我已经尝试了很多方法来使用其他帖子来解决这个问题，但似乎没有任何方法可以完全回答这个问题并且确实有效。

这是我的代码:

$(function() {
    // Create the chart
    Highcharts.setOptions({
    colors: ['#26d248', '#323232']
});

    chart = new Highcharts.Chart({
      chart: {
            renderTo: 'summoner-pie-container',
            type: 'pie',
             backgroundColor:'transparent'

        }, plotOptions: {

        series: {
            marker: {
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        },

        pie: {
            borderWidth: 0
        } 
    },


      title: {
text: '',
style: {
    display: 'none'
}
}, credits: {
  enabled: false
}, exporting: {
    buttons: {
        contextButton: {
            enabled: false
        }    
    }
   },
  tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.y;
            }
        },
        series: [{
            data: [["Damage Dealt",34000],["Team Damage Dealt",86423]],
            size: '60px',
            innerSize: '70%',
            dataLabels: {
                enabled: false
            }
        }]
    });


});

Answer 1

您可以使用渲染器在图表顶部绘制自定义元素: http://api.highcharts.com/highcharts/Renderer

您可以在 svg 元素上使用 css 方法来更改其样式: http://api.highcharts.com/highcharts/Element.css

例子:

// Render chart
var chart = Highcharts.chart(options);

// Create custom text element
var text = chart.renderer.text('100%').add(),
    textBBox = text.getBBox(),
    x = chart.plotLeft + (chart.plotWidth * 0.5) - (textBBox.width * 0.5),
    y = chart.plotTop + (chart.plotHeight * 0.5) + (textBBox.height * 0.25);
// Set position and styles
text.attr({ x: x, y: y }).css({ fontSize: '13px', color: '#666666' }).add();

实例:https://jsfiddle.net/zLhwqnq2/