label mpchart 饼图_Chart.js在饼图上显示标签

I recently updated my charts.js library to the most updated version (2.5.0).

This version doesn't show the labels on the chart.

I have an example of working one on fiddler: http://jsfiddle.net/g6fajwg8 .

However, I defined my chart exactly as in the example but still can not see the labels on the chart.

Note: There are a lot of questions like this on Google and Stackoverflow but most of them are about previous versions which is working well on them.

var config = {

type: 'pie',

data: {

datasets: [{

data: [

1200,

1112,

533,

202,

105,

],

backgroundColor: [

"#F7464A",

"#46BFBD",

"#FDB45C",

"#949FB1",

"#4D5360",

],

label: 'Dataset 1'

}],

labels: [

"Red",

"Green",

"Yellow",

"Grey",

"Dark Grey"

]

},

options: {

responsive: true,

legend: {

position: 'top',

},

title: {

display: true,

text: 'Chart.js Doughnut Chart'

},

animation: {

animateScale: true,

animateRotate: true

}

}

};

window.pPercentage = new Chart(ChartContext, config);

解决方案

It seems like there is no such build in option.

However, there is special library for this option, it calls: "Chart PieceLabel".

Here is their demo.

After you add their script to your project, you might want to add another option, called: "pieceLabel", and define the properties values as you like:

pieceLabel: {

// mode 'label', 'value' or 'percentage', default is 'percentage'

mode: (!mode) ? 'value' : mode,

// precision for percentage, default is 0

precision: 0,

// font size, default is defaultFontSize

fontSize: 18,

// font color, default is '#fff'

fontColor: '#fff',

// font style, default is defaultFontStyle

fontStyle: 'bold',

// font family, default is defaultFontFamily

fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

}