我正在学习如何使用ChartJ。特别是，尝试在不同类型的图表中使用步长。在下面的例子中，我可以为OY设置步长，但当它来到OX时，它不会改变任何东西。OX的步长是数字，但它应该是一段时间（2天，3天）。如何改变OX的步长？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Chart JS </title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #000000;
color: rgb(0, 0, 0);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(97, 113, 147, 0.45);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(145, 175, 241, 0.2);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
<hr>Step size OY
<input type="number" id ="steps">
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
// setup
const data = {
labels: ['20.04.2022', '25.04.2022', '30.04.2022', '04.05.2022', '09.05.2022', '14.05.2022'],
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgb(173,102,255)',
'rgba(255, 159, 64, 1)',
'rgb(0,0,0)'
],
borderWidth: 1
}]
};
// config
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
autoSkip: false,
time: {
unit: 'day',
parser: 'dd.MM.yyyy',
},
ticks: {
stepSize: 4
},
},
y: {
beginAtZero: true,
ticks: {
stepSize: 3
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
const steps = document.getElementById('steps');
steps.addEventListener('input', (e) => {
stepSizeY(myChart, e)
});
function stepSizeY(chart,e) {
chart.config.options.scales.y.ticks.stepSize = steps.value;
chart.update()
}
</script>
</body>
</html>
1条答案
按热度按时间wfauudbj1#
stpeSize选项用于计算刻度之间的差异，必须在时间节点中定义，而不是在刻度中定义：
编辑：CHART.JS文档要求在时间节点中使用stepSize，而不是在刻度中使用，因此这不是CHART.JS的错误。