javascript - 如何在chart.js中设置折线图中的行数?
问题描述
给定过去 9 天的日期标签和一组数字(2.5、1.5 等),我希望 y 轴上的数字/标签是 1-5 的整数,同时保持这些点。我想说的是我想在网格中有固定数量的行,但我对如何做到这一点一无所知。谁能帮我?
当前图表:
预期图表:
解决方案
选项 1/2:堆叠
最短的方法:
yAxes: [{
stacked: true,
}]
https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.6,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: true,
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
选项 2/2:步长
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size
更多控制==>设置步长(1
在你的例子中):
yAxes: [{
stacked: true,
ticks: {
stepSize: 1
}
}]
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Data label",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.0,6.7,7.5, 8.6]
}]
};
var options = {
responsive: true,
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
stacked: false,
ticks: {
},
}],
yAxes: [{
stacked: false,
ticks: {
stepSize: 1
}
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
推荐阅读
- jackson - Quarkus Jackson InvalidDefinitionException 找不到类型 [简单类型,类 java.math.BigDecimal] 的(映射)密钥反序列化器
- swift - UIActivityViewController 的标题是怎么设置的?
- python - 获取指向字典值的指针(python)
- javascript - 弹出登录页面
- java - 抛出 OutOfMemoryError“无法分配带有空闲字节的字节分配,直到 OOM”
- git - 使用 github 桌面和使用 git 有什么优势和区别?
- android - Android Studio 和 dart SDK 版本控制出错
- python-3.x - 为什么 Python tk 条目默认文本不显示路径而是显示普通文本?
- listview - 当子可滚动到达顶部时如何自动开始滚动父可滚动小部件
- python - 具有默认实现的 boost-python 虚函数