我正在嘗試在 Chart.js 中使用格式。我已經正確配置了匯入，但它仍然沒有顯示我想要的
它不適用于我的本地電腦。我將相同的代碼上傳到 codepen，但它也不起作用。你可以在這里驗證
var donutEl = document.getElementById("donut").getContext("2d");
var data = [4, 9, 5, 2];
var pieChart = new Chart(donutEl, {
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5, 50],
backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', ],
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
plugins: {
datalabels: {
formatter: (value) => {
return value '%';
}
}
}
}
})
任何想法我做錯了什么？謝謝
uj5u.com熱心網友回復：
如此處所述，您需要注冊插件：
Chart.register(ChartDataLabels);
現場示例：
Chart.register(ChartDataLabels);
const donutEl = document.getElementById("donut").getContext("2d");
const data = [4, 9, 5, 2];
const pieChart = new Chart(donutEl, {
type: 'doughnut',
data: {
datasets: [{
data: [10, 20, 15, 5, 50],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', ],
}, ],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
plugins: {
datalabels: {
formatter: (value) => {
return value '%';
}
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<div class="flexWrapper">
<canvas id="donut" width="400" height="400"></canvas>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/494016.html
標籤：javascript 图表 插件 图表.js
上一篇：與JavascriptDategetTime()函式的行為不一致
下一篇：Groovyxml映射分組重復鍵