javascript - Moment 和 ChartJS 时间格式解析的问题
问题描述
我正在尝试使用 ChartJS 2.9 的浮动条功能来模仿甘特图格式。到目前为止,我已经设法用折线图和 ChartJS 的一些创造性弯曲做了类似的事情,但是它存在严重的缺陷,并且它的功能不像我需要的那样。
这是我现在所拥有的,它只是使用一个带有整数的简单数据集:
var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-1-6", "y": "2021-2-16"},{"x": "2021-1-31", "y": "2021-5-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-1-7"}]}';
var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var data = {
type: 'horizontalBar',
data: {
labels: empNames,
datasets: [{
label: 'data',
data: [
[-3, 0],
[1, 4]
],
backgroundColor: 'lightblue'
}, {
label: 'data',
data: [
[1, 3],
[6, 8]
],
backgroundColor: 'lightblue'
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
}
}
};
var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
<canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
<div style="opacity:0;" class="chartTooltip center">
</div>
</div>
好吧,忠实于时尚,我以某种方式解决了我最初的问题。现在我无法获取格式的 x 轴值。这是我现在在下面的代码。我相信,基于 ChartJS 文档,我正确设置了时间对象,并且包含了所有 displayFormat 选项。
花了很多时间写这个问题,寻找我可能错过的关于为什么标签不会格式化的数据。
var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-01-06", "y": "2021-02-16"},{"x": "2021-01-31", "y": "2021-05-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-01-07"}]}';
var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var dateData = Object.values(parsedJSon.dateData);
var dataSets = [];
for (var i1 = 0; i1 < dateData.length; i1++) {
dataSets.push({
label: 'data',
data: [
[moment(dateData[i1].x, 'YYYY-MM-DD'), moment(dateData[i1].y, 'YYYY-MM-DD')],
[moment(dateData[i1 + 1].x, 'YYYY-MM-DD'), moment(dateData[i1 + 1].y, 'YYYY-MM-DD')]
],
backgroundColor: 'lightblue'
});
i1++
}
var data = {
type: 'horizontalBar',
data: {
labels: empNames,
datasets: dataSets
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Horizontal Floating Bars'
},
scales:{
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
millisecond: 'MMM YY',
second: 'MMM YY',
minute: 'MMM YY',
hour: 'MMM YY',
day: 'MMM YY',
week: 'MMM YY',
month: 'MMM YY',
quarter: 'MMM YY',
year: 'MMM YY'
}
},
ticks: {
min: moment('2020-09-01', 'YYYY-MM-DD'),
max: moment('2021-07-01', 'YYYY-MM-DD'),
},
}],
}
}
};
var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
<canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
<div style="opacity:0;" class="chartTooltip center">
</div>
</div>
我可能正在寻找一些东西,但无法弄清楚它是什么。
解决方案
好的,巨大的doh时刻。我忘了在秤内添加 xAxes 对象……可以!
推荐阅读
- authentication - Symfony 在登录和重定向之间丢失身份验证会话
- python - 使用python对fasta序列的顺序进行排序
- laravel - 如何存储来自选择标签的数据,该标签显示来自数据库 Laravel 5.6 的表中的数据
- c# - 使用控制台应用程序 c# 以静默方式打开批处理文件
- javascript - 笑话:如何在 node_modules 中模拟一个库?
- react-native - 使用没有 Wifi 的 Expo 在 React Native 中开发
- javascript - 如何设置 HTML 表单输入值,如果元素 id、类名、其他属性未知?
- java - 使用正则表达式从Java中的txt文件中获取引号之间的字符串
- google-cloud-platform - 实例网络接口有意外的名称:nic0
- github-api - 如何通过 Gitub API 创建组织邀请