本文介绍了Chartjs 嵌套饼图/甜甜圈图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Chart.js 制作了一些很棒的图表,到目前为止它对我来说一直很好用.我想创建这样的东西:
Chart.js makes some awesome looking charts and it's been working really well for me up until now. I'm wanting to create something like this:
有可能吗?
推荐答案
我认为这在 Chart.js 2.0 版本中是可能的.这是一个例子:
This is possible as of version 2.0 of Chart.js, I think. Here's an example:
var ctx = document.getElementById("myChart");
var chartData = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}, {
data: [200, 100, 25, 25, 66, 34],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
var pieChart = new Chart(ctx, {
type: 'pie',
data: chartData
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>
这篇关于Chartjs 嵌套饼图/甜甜圈图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!