我正在尝试使用chartjs-datalabels-plugin在图表上显示值。但我无法在jsfiddle上使用
这是我的代码
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart" height = 60></canvas>
</div>
</div>
我在jsfiddle中导入chartjs-datalabels-plugin,然后在选项中将display选项启用为true。但图表中未显示任何值。
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
....
maintainAspectRatio: false,
options: {
plugins: {
datalabels: {
color: 'black',
display: true,
font: {
weight: 'bold'
},
formatter: Math.round
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
},
barThickness: 9
}],
xAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
suggestedMax: 100,
display: false
},
barThickness: 9
}]
}
}
});
最佳答案
Datalabels plugin需要Chart.js 2.7.0或更高版本。
在您的小提琴中,您使用了2.4.0版本。
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
height: 200,
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: [
'#F4B266',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderWidth: 1
},
{
label: '# of Votes',
data: [18],
backgroundColor: [
'#AEB7B2',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderWidth: 1
}
]
},
maintainAspectRatio: false,
options: {
plugins: {
datalabels: {
color: 'black',
display: function(context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
},
barThickness: 9
}],
xAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
suggestedMax: 100,
display: false
},
barThickness: 9
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart" height = 60></canvas>
</div>
</div>
关于javascript - chart.js-datalabels-插件不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49346585/