我有一个用 ASP .NET Core 编写的 Web 应用程序，其中一个页面上有一个使用 ChartJS 创建的条形图(它从数据库获取数据)。我正在尝试在图表中的每个条形上显示数据值。我尝试使用 this plugin ，但是我的图表没有显示在页面上，并且出现以下错误:Uncaught ReferenceError:ChartDataLabels 未定义 和 Uncaught TypeError:无法设置未定义的属性“datalabels” :
这是我的图表代码:
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46252e273432682c35067468756876" rel="noreferrer noopener nofollow">[email protected]</a>/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aaa1a8bbbda3bae4b9a5bcaea0a7e4ada8bda8a5a8abaca5ba89f8e7f9e7f9" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '@Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Fact',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
我错过了什么？
更新:
感谢 @LeeLenalee 的建议，我更新了代码，但现在我收到另一条错误消息:Uncaught TypeError: Cannot read property 'skip' of undefined
更新的代码:
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2f242d3e38263f613c20392b252261282d382d202d2e29203f0c7d627c627c" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '@Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Hour',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
更新2: 事实证明，chartjs-plugin-datalabels 有一个与 ChartJS 3.0 配合使用的更新版本，因此解决方案是实现两者的最新版本，如下所示:
<body>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3e353c2f2973372e1d6e7368736d" rel="noreferrer noopener nofollow">[email protected]</a>/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbeb5bcafa9b7aef0adb1a8bab4b3f0b9bca9bcb1bcbfb8b1ae9deff3edf3ed" rel="noreferrer noopener nofollow">[email protected]</a>/dist/chartjs-plugin-datalabels.min.js"></script>
</body>
最佳答案
如 documentation 中所述您需要至少安装 Chart.js 版本 2.7.0，您当前使用的是 2.3.0。
之后，您必须通过调用 Chart.plugins.register(ChartDataLabels); 全局注册插件，以便所有图表都有数据标签，或者将其本地注册到您想要标签的图表如下例所示:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
},
plugins: [ChartDataLabels]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea89828b989e8099c79a869f8d8384c78e8b9e8b868b888f8699aadbc4dac4da" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
</body>关于asp.net-core - 无法在chartJS中显示数据标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68470463/