[英]How can I get a data label in my Highcharts Pie Chart that is a font-awesome icon?
I'm trying to get a highchart's pie chart to work with font-awesome (or actually, we have ico-moon but I figure the technique would be the same so for the sake of this exercise, I'm going with font-awesome). 我正在尝试获取一个highchart的饼图以使用真棒字体(或者,实际上,我们有ico-moon,但我认为该技术是相同的,因此,为了进行本练习,我将使用真棒字体)。 I want the data labels (in my fiddle, the ones that say "icon") to actually be icons.
我希望数据标签(在我的小提琴中,那些说“ icon”的标签)实际上是图标。 I don't want to alter anything else as the piechart is so far perfect.
我不想更改其他任何内容,因为该饼图非常完美。 Just add the icons.
只需添加图标即可。
Anybody have any suggestions to help? 有人有什么建议可以帮助吗? I have unicodes available to me and also tags.
我有可用的unicode和标签。
Thanks in advance! 提前致谢!
My Fiddle: http://jsfiddle.net/ewyss/z98ofd63/ 我的小提琴: 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
}]
});
});
});
You can add the icons inside the labels of your dataset. 您可以在数据集的标签内添加图标。 Something like
<i class='fa fa-times'></i>
. 类似于
<i class='fa fa-times'></i>
。 By default any HTML is stripped from your labels, but you can enable it by setting dataLabels.useHTML
to true
. 默认情况下,所有HTML都会从标签中剥离,但是您可以通过将
dataLabels.useHTML
设置为true
来启用。
In short, you would have to change this: 简而言之,您必须更改此设置:
series: [{
type: 'pie',
name: 'PPM Resource Waste',
data: [
['Blank', 60],
['Icon 1%', 5],
['Icon 15%', 15],
['Icon 1%', 5],
['Icon 5%', 5]
],
animation: false
}]
to something similar to this: 类似于以下内容:
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
}]
as you can see in your updated fiddle: http://jsfiddle.net/z98ofd63/1/ 正如您在更新的小提琴中看到的那样: http : //jsfiddle.net/z98ofd63/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.