我想向饼图Highchart添加标签,以便标签显示类别和数量,如this example
这是我的代码:
$('#ro-tier-1').highcharts({
chart: {
type: 'pie'
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
endRow: 3,
googleSpreadsheetWorksheet: 16
},
plotOptions: {
dataLabels: {
enabled: true,
format: '{y}',
}
},
title: {
text: 'Tier 1 Schools in 2012, 2013, or 2014 Expansion or Ceiling increase '
},
yAxis: {
min: 0,
max: 25,
tickInterval: 5,
title: {
text: 'Amount of Schools'
},
},
xAxis: {
type: 'category',
title: {
text: 'Result'
}
},
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
</script>
</head>
<body>
<div id="ro-tier-1"></div>
</body>
我知道我的问题出在数据标签的格式中,但是API文档对此却很少。
最佳答案
您所需要做的就是将dataLabels放置在正确的plotOptions中并使用point
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.name}:{point.y}',
}
}
}
您可以在此处http://plnkr.co/edit/5VI6cAqVoIibhAJ8pYfP看到工作示例
更新
格式化也可以使用{y}格式:'{y}',但是如果您想通过点引用更高级的表达式,则必不可少