我试图将数据标签对准画布的右侧。有什么办法可以将标签向右移动?这是我配置标签的方法
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = ((value * 100) / sum).toFixed(2) + "%";
return percentage;
},
color: "#000",
align: "right",
anchor: "end",
offset: "70"
},
drawBorder: true
},
答案 0 :(得分:0)
Plugin Core API提供了一系列可用于执行自定义代码的挂钩。您可以使用CanvasRenderingContext2D.fillText()
使用afterDraw
钩子在画布上直接绘制文本,如下所示:
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.font = "12px Arial";
let sum = chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0);
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales["y-axis-0"];
yAxis.ticks.forEach((v, i) => {
var label = chart.data.labels[i];
var value = chart.data.datasets[0].data[i];
var x = xAxis.getPixelForValue(value) + 5;
var y = yAxis.getPixelForTick(i);
let percent = (value * 100 / sum).toFixed(2);
ctx.fillText(label + ' (' + percent + '%)', x, y);
});
ctx.restore();
}
}],
您可能还必须在图表的右侧定义一些padding
,以确保所有标签都显示在canvas
上。
options: {
layout: {
padding: {
right: 110
}
},
请查看下面的可运行代码段。
const chart = new Chart(document.getElementById('myChart'), {
type: 'horizontalBar',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.font = "12px Arial";
let sum = chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0);
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales["y-axis-0"];
yAxis.ticks.forEach((v, i) => {
var label = chart.data.labels[i];
var value = chart.data.datasets[0].data[i];
var x = xAxis.getPixelForValue(value) + 5;
var y = yAxis.getPixelForTick(i);
let percent = (value * 100 / sum).toFixed(2);
ctx.fillText(label + ' (' + percent + '%)', x, y);
});
ctx.restore();
}
}],
data: {
labels: ['Traffic source 1', 'Traffic source 2', 'Traffic source 3', 'Traffic source 4'],
datasets: [{
label: 'By Dataset',
data: [15, 8, 12, 6],
backgroundColor: ['red', 'lightblue', 'green', 'orange'],
barPercentage: 1,
categoryPercentage: 1
}]
},
options: {
layout: {
padding: {
right: 110
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false
},
gridLines: {
drawTicks: false
}
}],
xAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>