ChartJS xAxis 标签位置
ChartJS xAxis label position
我有一个 ChartJS,当您将 window 调整为更小的尺寸时,它会将标签显示为倾斜的。
我想要做的是将 X 标签垂直向下一点,这样它们就不会尽可能靠近图表的底部。
谷歌搜索后,我似乎可以禁用 x 轴的刻度显示并使用选项的动画手动执行此操作。我试图在下面的 fiddle.
中实现它
animation: {
duration: 1,
onComplete: function() {
var chartInstance = this.chart;
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var label = bar._model.label;
var xOffset = bar._model.x;
var yOffset = bar._model.y;
ctx.fillText(label, xOffset, 420);
});
});
}
},
但是,当我调整 window 大小时,无法使标签正确缩放。你能帮忙吗?
Chart.js 在 ticks
对象中为此实现了一个 padding
属性:
Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
这是一个工作示例,其中 x 轴标签从直线向下偏移 20 像素:
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["Blue", "Red", "Green", "Orange", "Purple"],
datasets: [{
data: [0, 1, 2, 3, 4]
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
padding: 20
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="height:200px;width:200px">
<canvas id="chart"></canvas>
</div>
我有一个 ChartJS,当您将 window 调整为更小的尺寸时,它会将标签显示为倾斜的。
我想要做的是将 X 标签垂直向下一点,这样它们就不会尽可能靠近图表的底部。
谷歌搜索后,我似乎可以禁用 x 轴的刻度显示并使用选项的动画手动执行此操作。我试图在下面的 fiddle.
中实现它 animation: {
duration: 1,
onComplete: function() {
var chartInstance = this.chart;
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var label = bar._model.label;
var xOffset = bar._model.x;
var yOffset = bar._model.y;
ctx.fillText(label, xOffset, 420);
});
});
}
},
但是,当我调整 window 大小时,无法使标签正确缩放。你能帮忙吗?
Chart.js 在 ticks
对象中为此实现了一个 padding
属性:
Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
这是一个工作示例,其中 x 轴标签从直线向下偏移 20 像素:
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["Blue", "Red", "Green", "Orange", "Purple"],
datasets: [{
data: [0, 1, 2, 3, 4]
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
padding: 20
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="height:200px;width:200px">
<canvas id="chart"></canvas>
</div>