Chart.js v2.7.1使用Chrome。链接到示例是https://codepen.io/anon/pen/opbvQZ
如何设置labelOffset取决于刻度之间的距离,因此调整标签的大小不再位于中心(虽然小提示显示数字轴,但重要的是修复也适用于类别类型轴)
对于上下文,我试图将气泡图上的x和y轴的轴标签居中,这会对调整浏览器窗口的大小做出反应。
码;
HTML;
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
</html>
JS;
var data = {
datasets: [
{
label: 'Dataset 1',
data: [
{
x: 2.5,
y: 2.5,
r: 15
},
{
x: 4.5,
y: 4.5,
r: 5
},
{
x: 5.5,
y: 1.5,
r: 10
}
],
},
{
label: 'Dataset 2',
data: [
{
x: 3.5,
y: 2.5,
r: 40
},
{
x: 1.5,
y: 2.5,
r: 3
}
],
}
]
};
var options = {
elements: {
points: {
borderWidth: 1,
borderColor: 'rgb(0, 0, 0)'
}
},
scales:{
xAxes:[{
ticks: {
labelOffset: 50,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'X Axis',
fontSize: 16,
padding: 8
},
}],
yAxes: [{
ticks: {
labelOffset: -50,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'Y Axis',
fontSize: 16,
padding: 8
},
}]
},
};
var ctx = document.getElementById("myChart");
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: options
});
jcopperfield在Github上回答了这个问题,这是解决方案;
// centre x-scale label
var xScale = myBubbleChart.scales['x-axis-0'];
var xLabelOffset = (xScale.getPixelForTick(1) - xScale.getPixelForTick(0)) / 2;
myBubbleChart.options.scales.xAxes[0].ticks.minor.labelOffset = xLabelOffset;
// centre y-scale label
var yScale = myBubbleChart.scales['y-axis-0'];
var yLabelOffset = (yScale.getPixelForTick(0) - yScale.getPixelForTick(1)) / 2;
myBubbleChart.options.scales.yAxes[0].ticks.minor.labelOffset = yLabelOffset;
// update chart
myBubbleChart.update();