如何在chart.js中为饼图添加标签 [英] How to add label in chart.js for pie chart

问题描述

我正在显示饼状图。但是如何在饼图中显示标签。

I am displaying Pie chart. But how to Display labels in pie charts.

以下是饼图的chart.js代码。

Below is the chart.js code for pie chart.

this.Pie = function(data, options) {

  chart.Pie.defaults = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    animation: true,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    onAnimationComplete: null
  };

  var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;

  return new Pie(data, config, context);
};

以下是用于显示饼图的html文件的代码

and below is the code of html file for displaying pie chart

代码：

var data = [{
  value: 20,
  color: "#637b85"
}, {
  value: 30,
  color: "#2c9c69"
}, {
  value: 40,
  color: "#dbba34"
}, {
  value: 10,
  color: "#c62f29"
}];

var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);

推荐答案

EDIT： http://jsfiddle.net/nCFGL/223/ 我的例子。

http://jsfiddle.net/nCFGL/223/ My Example.

你应该能够如下：

var pieData = [{
    value: 30,
    color: "#F38630",
    label: 'Sleep',
    labelColor: 'white',
    labelFontSize: '16'
  },
  ...
];

包括Chart.js，位于：

Include the Chart.js located at:

https://github.com/nnnick/Chart.js/pull/35

这篇关于如何在chart.js中为饼图添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！