答案 0 :(得分:2)
您可以按照以下步骤更改xAxes
标签位置:
将.getContext("2d")
添加到获取ctx
画布对象的调用中:
var ctx = document.getElementById("gescanntePackzettelChart").getContext("2d");
隐藏当前的xAxes ticks
:
xAxes: [{
ticks: {
display: false
}
}
将animation
添加到options
配置中,并使用canvas fillText()
方法创建新标签:
animation: {
duration: 1,
onComplete: function() {
var controller = this.chart.controller;
var chart = controller.chart;
var xAxis = controller.scales['x-axis-0'];
var numTicks = xAxis.ticks.length;
var xOffsetStart = xAxis.width / numTicks;
var halfBarWidth = (xAxis.width / (numTicks * 2));
xAxis.ticks.forEach(function(value, index) {
var xOffset = (xOffsetStart * index) + halfBarWidth;
var yOffset = chart.height - 20;
ctx.fillText(value, xOffset, yOffset);
});
}
}
对于xOffset
,要确定正确的位置,请取xAxis
宽度并将其除以刻度标签的数量。这将告诉您每个条的宽度。然后,将该数字乘以当前index
,将标签放在正确的条形图前面。最后,添加添加半个条的宽度,使条形图中的标签居中。
对于yOffset
,从图表的高度开始,然后减去你想要移动标签的数量。
使用JSFiddle:https://jsfiddle.net/m5tnkr4n/124
答案 1 :(得分:0)
基于@ Tot-Zam的响应,可以使用ChartJs缩放对象的方法来更轻松地定义上下文像素坐标。您也不需要定义ctx
对象-使用this.chart
对象已经可以访问它。
animation: {
duration: 0,
onComplete: function() {
let chart = this.chart;
let controller = chart.controller;
let axis = controller.scales['x-axis-0'];
let yOffset = chart.height - 5;
axis.ticks.forEach(function(value, index) {
let xOffset = axis.getPixelForValue(value);
chart.ctx.fillText(value, xOffset, yOffset);
})
}
}
工作代表:https://repl.it/@lunarplasma/ChartJs-custom-axis-labels