我试图获得一个highchart的饼图以使用真棒字体(或实际上,我们有ico-moon,但我认为该技术是相同的,因此为了进行本练习,我将使用真棒字体)。我希望数据标签(在我的小提琴中,那些说“ icon”的标签)实际上是图标。我不想更改任何其他内容,因为该饼图到目前为止非常完美。只需添加图标即可。
有人有什么建议吗?我有可用的unicode和标签。
提前致谢!
我的小提琴:
http://jsfiddle.net/ewyss/z98ofd63/
$(function () {
var chart;
$(document).ready(function () {
Highcharts.setOptions({
colors: ['#f1f1f1', '#A24130', '#A24130', '#A24130', '#A24130']
});
var chart;
// Build the chart
piechart = new Highcharts.Chart({
chart: {
renderTo: 'piecontainer',
plotBackgroundColor: null,
plotBorderWidth: 0
},
title: {
text: null
},
credits: {
enabled: false
},
tooltip: {
pointFormat: false
},
plotOptions: {
pie: {
startAngle: -270,
allowPointSelect: false,
dataLabels: {
softConnector: false,
//if data.point.name == empty string return enabled: false, else return enabled: true... This will be the slice called slice
enabled: true,
connectorWidth: 1,
distance: 15,
style: {
fontFamily: 'roboto',
fontSize: '8pt',
width: 80
}
},
showInLegend: false
}
},
series: [{
type: 'pie',
name: 'PPM Resource Waste',
data: [
['Blank', 60],
['Icon 1%', 5],
['Icon 15%', 15],
['Icon 1%', 5],
['Icon 5%', 5]
],
animation: false
}]
});
});
});
最佳答案
您可以在数据集的标签内添加图标。类似于<i class='fa fa-times'></i>
。默认情况下,所有HTML都会从标签中删除,但是您可以通过将dataLabels.useHTML
设置为true
来启用它。
简而言之,您必须更改此设置:
series: [{
type: 'pie',
name: 'PPM Resource Waste',
data: [
['Blank', 60],
['Icon 1%', 5],
['Icon 15%', 15],
['Icon 1%', 5],
['Icon 5%', 5]
],
animation: false
}]
类似于以下内容:
series: [{
type: 'pie',
name: 'PPM Resource Waste',
data: [
['<i class="fa fa-dollar fa-2x"></i> Blank', 60],
['<i class="fa fa-save"></i> Icon 1%', 5],
['<i class="fa fa-cutlery"></i> Icon 15%', 15],
['<i class="fa fa-ban"></i> Icon 1%', 5],
['<i class="fa fa-spinner fa-spin"></i> Icon 5% ', 5],
],
dataLabels: {
useHTML: true
},
animation: false
}]
正如您在更新的小提琴中看到的:http://jsfiddle.net/z98ofd63/1/
关于javascript - 如何在Highcharts饼图中获取 Font Awesome 图标的数据标签?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27237476/