Javascript 如何更改饼图中的字体属性?

Javascript 如何更改饼图中的字体属性?,javascript,jquery,css,highcharts,Javascript,Jquery,Css,Highcharts,我正在使用这个插件,我正在尝试更改包含percentajes类型的标签的一些字体属性 我试过了,但不起作用 JS $(function () { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, style: {

我正在使用这个插件,我正在尝试更改包含percentajes类型的标签的一些字体属性

我试过了,但不起作用

JS

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            style: {
                fontFamily: 'Lato',
                color: "red"
            }
        },
        plotOptions: {
            pie: {
                cursor: 'pointer'
            }
        },
        credits: false,
        title: false,
        tooltip: false,
        series: [{
            type: 'pie',

            data: [
                {
                    name: 'Example1',
                    y: 40,
                    sliced: true,
                    color: "rgb(10,200,23)"
                },
                ['Example2',   12.0],
                ['Example3',       26.8],
                ['Example4',    8.5],
                ['Example5',     6.2],
                ['Example6',   0.7]
            ]
        }]
    });
});
@import url(http://fonts.googleapis.com/css?family=Lato);
CSS

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            style: {
                fontFamily: 'Lato',
                color: "red"
            }
        },
        plotOptions: {
            pie: {
                cursor: 'pointer'
            }
        },
        credits: false,
        title: false,
        tooltip: false,
        series: [{
            type: 'pie',

            data: [
                {
                    name: 'Example1',
                    y: 40,
                    sliced: true,
                    color: "rgb(10,200,23)"
                },
                ['Example2',   12.0],
                ['Example3',       26.8],
                ['Example4',    8.5],
                ['Example5',     6.2],
                ['Example6',   0.7]
            ]
        }]
    });
});
@import url(http://fonts.googleapis.com/css?family=Lato);
HTML

<div id="container" style="width:100%; height:400px;"></div>



我想念什么?有没有这样的想法或建议?提前感谢。

您可以设置Highschart.js生成的内联样式,方法是向
绘图选项添加
数据标签
块,并定义一些样式属性:

plotOptions: {
    pie: {
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            color: 'red',
            style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' }
        }
    }
}
这是你的最新信息

如果还希望在
样式
块中控制字体的颜色,则需要使用
填充
属性

这是默认设置的属性(您可能希望使用
样式
设置进行覆盖):

但如果需要,您可以定义更多

注意:您还可以通过将
dataLabels
对象传递到
data
块来控制单个标签的样式,方法与您定义饼图楔形块的样式相同:

{
name: 'Example1',
y: 40,
sliced: true,
color: 'rgb(10,200,23)',
dataLabels: { style:{ /* your style properties here */ }}
}

真的谢谢!工作完美,你给我们一个很好的解释!