javascript - ChartJS 无法为时间序列数据呈现水平条形图
问题描述
这是一个解释问题的 plunker https://embed.plnkr.co/plunk/49kIfy8OShzlzu5J 。
如果图表type
更改为bar
或line
它工作正常。但它无法呈现horizontalBar
- 没有错误或警告表明任何问题(如果有)。
是否horizontalBar
需要用户手动明确地设置标签,还是我在这里缺少配置设置?
解决方案
使用时horizontalBar
,您必须确保您yAxis
的定义为type: 'time'
. 您的数据也必须反映这一点并提供正确轴的数据。
{ y: '2020-01-01T00:00:00', x: Math.random() * 20 }
这可能如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="height: 450px; width: 300px">
<canvas id="canvas"></canvas>
</div>
<script>
const config = {
type: 'horizontalBar',
options: {
title: { text: 'Bar Chart', display: true },
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [
{
offset: true,
type: 'time'
},
]
},
},
data: {
datasets: [
{
label: 'Label 1',
borderColor: '#40407a',
backgroundColor: '#d1ccc0',
borderWidth: 3,
data: [
{ y: '2020-01-01T00:00:00', x: Math.random() * 20 },
{ y: '2020-01-01T01:00:00', x: Math.random() * 20 },
{ y: '2020-01-01T01:20:00', x: Math.random() * 20 },
{ y: '2020-01-01T02:10:00', x: Math.random() * 20 },
{ y: '2020-01-01T02:35:00', x: Math.random() * 20 },
{ y: '2020-01-01T03:00:00', x: Math.random() * 20 },
],
},
],
},
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
推荐阅读
- javascript - Tabulator JS - 如何在用户输入时验证数字字段
- amazon-web-services - 通过 Athena 将 AWS S3 中的 CSV 合并到更大的 GZIP 文件中
- python - 在 Google 表格上使用 Gspread 识别单元格位置的问题
- algorithm - 算法运行时上限的缩放告诉您什么?
- java - 为什么我的随机数组在 0.001 秒内排序?
- android-studio - 在最后一个 gradle 版本中无法解析 android studio 中的 jitpack 依赖项
- linux - 如何从 Linux bash 脚本将多个项目加载到一个 Qt Creator 实例中?
- html - 如何将图标向右移动?
- python - 在python中使用moviepy时将视频转换为音频错误
- qt - 如何将数据发送到多线程服务器上的特定客户端