如何在chart.js中为饼图添加标签
16lz
2021-01-22
I am displaying Pie chart. But how to Display labels in pie charts.
我正在显示饼图。但是如何在饼图中显示标签。
Below is the chart.js code for pie chart.
下面是饼图的chart.js代码。
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);
};
and below is the code of html file for displaying pie chart
以下是用于显示饼图的html文件的代码
code:
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);
5 个解决方案
#1
15
EDIT: http://jsfiddle.net/nCFGL/223/ My Example.
编辑:http://jsfiddle.net/nCFGL/223/我的例子。
You should be able to like follows:
你应该能够喜欢以下内容:
var pieData = [{
value: 30,
color: "#F38630",
label: 'Sleep',
labelColor: 'white',
labelFontSize: '16'
},
...
];
Include the Chart.js located at:
包括位于以下位置的Chart.js:
https://github.com/nnnick/Chart.js/pull/35
更多相关文章
- 试着在我的javascript代码中理解“this”(一件事有效,另一件没有)
- 代码点火-如何从控制器返回Json响应
- 小弟初学网页(javascript),看不懂下面的代码。但又要完成任务 各位
- 使用jquery在textarea中的颜色代码
- 为什么我的javascript/jquery代码不能像预期的那样工作?
- 实现浮动广告的代码
- 豆瓣Javascript代码风格规范
- 计算机视觉相关代码片段(Python)
- 120行python代码解锁10000分微信跳一跳