我想设置图表条js Y轴的线差为2。
目前,Y 轴值类似于 0、10、20、30,但我需要类似于 0、2、4、6、8...30。我的代码如下
<script>
$( document ).ready(function() {
var BarsChart = (function() {
var $chart = $('#chart-bars');
function initChart($chart) {
var ordersChart = new Chart($chart, {
type: 'bar',
data: {
labels: ["Jan","Feb","Mar","Apr","May"],
datasets: [{
label: 'Events',
data: [0,5,6,0,0],
backgroundColor: "#2dce89"
}]
},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
stepSize: 2,
max: 30
}
}]
}
}
});
$chart.data('chart', ordersChart);
}
if ($chart.length) {
initChart($chart);
}
})();
});
</script>
最佳答案
您可以将 autoSkip: false
添加到 yAxis.ticks
配置如下
ticks: {
autoSkip: false,
If
autoSkip
istrue
(default), Chart.js automatically calculates how many labels can be shown and hides labels accordingly. TurnautoSkip
off to show all labels no matter what.
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May"],
datasets: [{
label: 'Events',
data: [0, 5, 6, 0, 0],
backgroundColor: "#2dce89"
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
display: true,
ticks: {
autoSkip: false,
beginAtZero: true,
stepSize: 2,
max: 30
}
}]
}
}
});
canvas {
max-width: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
关于jquery - 如何在图表栏 JS 中设置自定义 Y 轴值 (Chart.js v2.8.0),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60584885/