javascript - Chart.js:一个值为空,但不能断行
问题描述
这是我要绘制的折线图。
标签是
[2019, 2020, 2021, 2022]
但数据集是
[{
data: [100, '', 200, 100]
...
}]
数据集中的第二个是 null 或 '',但我希望这条线不要被打破。
我怎样才能画出这样的图表?
解决方案
您可以使用对象表示法来实现此目的,方法是告诉 chart.js 必须将值链接到哪个 x 标签,以便您可以跳过一些标签。
例子:
var options = {
type: 'line',
data: {
labels: [2019, 2020, 2021, 2022],
datasets: [{
label: '# of Votes',
data: [{
x: 2019,
y: 100
}, {
x: 2021,
y: 200
}, {
x: 2022,
y: 100
}],
borderColor: 'pink',
backgroundColor: 'red',
radius: 5
}]
},
options: {
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
推荐阅读
- spring - 在 Spring Boot 中捕获 CharConversionException
- c - 在C中打印和排序txt文件
- android - Flutter - 如何解析带有列表的嵌套 JSON 结构?
- git - 将我的 repo 分叉与原始 repo 同步
- sql-server - 在 SQL Server 中删除表的正确方法
- excel - 范围公式的应用程序定义错误
- bash - awk 获取 file1 列并检查 file2 的 column1,如果匹配则打印相应的值
- java - 无法为连接 URL 创建类 '' 的 JDBC 驱动程序
- java - 使用 AWTEventListener 的 Java Break while 循环
- c# - 修复了在反序列化期间没有为“System.String[]”类型定义无参数构造函数的问题