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

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 : http://api.highcharts.com/highcharts/Renderer

您可以在svg元素上使用css方法来更改其样式： http://api.highcharts.com/highcharts/Element.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/

Answer 2

您的所有答案似乎都在HighCharts文档中得到了回答。 例如，请参见以下页面： 有关样式的HighCharts文档 。

请记住，在驼峰情况下，样式是使用Javascript访问的（例如，background-color变为backgroundColor），因此font-family变为fontFamily。

Highcharts.setOptions({
chart: {
    style: {
        fontFamily: 'helvetica'
    }
} });