8

I'm using the pie Highchart.js plugin, and I'm trying to change some font properties of the labels which contains the type of the percentajes.

I tried this but does not work... http://tinker.io/3fc64/6

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]
            ]
        }]
    });
});

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);

HTML

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

What I miss? Any idea or advice to do this? Thanks in advance.

4

1 回答 1

21

您可以设置由 Highschart.js 生成的内联样式，方法是向->添加一个dataLabels块并定义一些样式属性：plotOptionspie

plotOptions: {
    pie: {
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            color: 'red',
            style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' }
        }
    }
}

这是您更新的修补程序。

如果你想在style块中也控制字体的颜色，你需要使用该fill属性。

这是默认设置的属性（您可能希望使用style设置覆盖）：

font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
line-height:14px;
fill:#666;

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

注意：dataLabels您还可以通过将对象传递到块中来控制各个标签的样式data，就像您定义其中一个饼形楔形的样式一样：

{
name: 'Example1',
y: 40,
sliced: true,
color: 'rgb(10,200,23)',
dataLabels: { style:{ /* your style properties here */ }}
}
于 2013-05-03T00:51:51.713 回答