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

我在将文本添加到饼图的中心后，希望它具有特定的字体、字体大小和字体颜色。如何使用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
            }
        }]
    });


});

$（函数（）{
//创建图表
Highcharts.setOptions({
颜色：['#26d248'，'#323232']
});
图表=新的高点图表。图表({
图表：{
renderTo:“召唤派容器”，
键入“pie”，
背景颜色：'透明'
}，打印选项：{
系列：{
标记：{
国家：{
悬停：{
已启用：false
}
}
}
},
馅饼：{
边框宽度：0
} 
},
标题：{
文本：“”，
风格：{
显示：“无”
}
}，学分：{
已启用：false
}，出口：{
按钮：{
上下文按钮：{
已启用：false
}    
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.point.name+”：“+this.y；
}
},
系列：[{
数据：[[“造成的伤害”，34000]，“团队造成的伤害”，86423]，
尺寸：'60px'，
内部尺寸：“70%”，
数据标签：{
已启用：false
}
}]
});
});

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

请记住，样式是在camel情况下通过Javascript访问的（例如，背景色变为backgroundColor），所以字体族变为字体族

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

---

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

请记住，样式是在camel情况下通过Javascript访问的（例如，背景色变为backgroundColor），所以字体族变为字体族

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

---

可以使用渲染器在图表顶部绘制自定义元素：

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();

---

实时示例：

您可以使用渲染器在图表顶部绘制自定义元素：

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();

实例：