我已经在我的应用程序中使用了甜甜圈图,我需要边界半径,但不工作,我正在使用这个borderRadius:30,
你能解决这个问题吗?
$(function() {
//get the doughnut chart canvas
var ctx1 = $("#doughnut-chartcanvas-1");
//doughnut chart data
var data1 = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [{
label: "TeamA Score",
borderRadius: 30,
data: [10, 50, 25, 70, 40],
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57"
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46"
]
}]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Doughnut Chart",
fontSize: 18,
fontColor: "#111",
},
borderRadius: 100,
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create Chart class object
var chart1 = new Chart(ctx1, {
type: "doughnut",
data: data1,
options: options
});
});
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Doughnut</title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
<div class="chart-container">
<div class="doughnut-chart-container">
<canvas id="doughnut-chartcanvas-1"></canvas>
</div>
</div>
<!-- javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
</body>
</html>
enter image description here
我需要在我们的圆环图弯曲每个角落。所以如何使用我们的代码内的属性(outerStart,outerEnd,innerStart,innerRight)。你能告诉我吗?我怎么解决这个问题。
1条答案
按热度按时间cigdeys31#
您可以使用:
变量数据1 ={
}