HTML
<body>
<div style = "width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style = "width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style = "width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
JAVASCRIPT
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options =
{
title:
{
display:false,
},
legend:
{
display:false
},
tooltip:
{
enabled:false
},
animation:
{
duration: 0
}
}
var data =
{
datasets:
[
{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0
}
]
}
var chart =
new Chart(context,
{
type: "doughnut",
cutout: 100 * radius,
responsive: true,
data: data,
options: options
});
</script>
小提琴
https://jsfiddle.net/t5a41rdj/
根據標題，盡管禁用了圖例和標題，但不知何故，這張圖表頂部有一點偏移，我似乎無法擺脫。
有什么明顯的我失蹤了嗎？
uj5u.com熱心網友回復：
這是因為您沒有禁用圖例、標題或工具提示。如果您將滑鼠懸停在圖表上，您可以看到工具提示仍在作業，默認情況下標題是隱藏的。為什么圖例不顯示我真的不知道，仍應顯示 1 個未定義為文本的專案。但是，如果您在正確的空間使用 isplugins命名空間禁用它，您會看到額外的填充消失。
此外，cutout 和 responsive 必須在選項中配置，而不是在新圖表的根目錄中：
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options = {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
animation: {
duration: 0
},
cutout: 100 * radius,
responsive: true,
}
var data = {
datasets: [{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0,
}]
}
var chart =
new Chart(context, {
type: "doughnut",
data: data,
options: options
});<body>
<div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style="width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420858.html
標籤：