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/

Answer 2

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

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

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

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

2 个答案: