lundi 1 décembre 2014

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). I want the data labels (in my fiddle, the ones that say "icon") to actually be icons. 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.


Thanks in advance!


My Fiddle: http://ift.tt/1tF4RSw



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




Aucun commentaire:

Enregistrer un commentaire