javascript - Chart JS - x 轴以天为单位的折线图
问题描述
我需要在上午 12 点绘制带有 x 轴的图表。它使用了很多点
但这是我得到的输出:
我在 x 轴上得到了这个奇怪的“对象”
//I have truncated the stats as it exceeded the max length in SO
let response = '{"stats":[ { "time":"2018-10-24 13:30:02", "occupation":"54", "liveness":"78", "efficiency":"48", "pms":"up" }, { "time":"2018-10-24 13:45:02", "occupation":"55", "liveness":"78", "efficiency":"50", "pms":"up" }, { "time":"2018-10-24 14:00:01", "occupation":"56", "liveness":"76", "efficiency":"51", "pms":"up" }, { "time":"2018-10-24 14:15:02", "occupation":"56", "liveness":"77", "efficiency":"52", "pms":"up" }, { "time":"2018-10-24 14:30:01", "occupation":"56", "liveness":"78", "efficiency":"53", "pms":"up" }, { "time":"2018-10-24 14:45:01", "occupation":"57", "liveness":"79", "efficiency":"56", "pms":"up" }, { "time":"2018-10-24 15:00:02", "occupation":"57", "liveness":"79", "efficiency":"56", "pms":"up" }]}';
let parsedResponse = ($.parseJSON(response));
let stats = parsedResponse.stats;
let arrayDays = [];
$.each(parsedResponse.days, function(key, value) {
arrayDays.push(moment(value).toDate());
});
let statLength = stats.length;
let occupation = [];
let liveness = [];
let efficiency = [];
let labels = [];
parsedResponse = undefined;
let dataDateTime = '';
let dataDateTimeFormat = 'MMM DD HH:mm A';
for(let index = 0; index < statLength; index++) {
dataDateTime = moment(stats[index]['time']).format(dataDateTimeFormat);
// occupation.push({'x': dataDateTime, 'y': stats[index]['occupation']});
// liveness.push({'x': dataDateTime, 'y': stats[index]['liveness']});
// efficiency.push({'x': dataDateTime, 'y': stats[index]['efficiency']});
occupation.push(stats[index]['occupation']);
liveness.push(stats[index]['liveness']);
efficiency.push(stats[index]['efficiency']);
labels.push({dataDateTime});
}
let fill = false;
let color = Chart.helpers.color;
let data = {
labels: labels,
datasets: [{
label: 'Screens',
pointRadius: 0,
tension: 0,
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
fill: fill,
data: liveness
},{
label: 'Occupation',
pointRadius: 0,
tension: 0,
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
fill: fill,
data: occupation
},{
label: 'Efficiency',
pointRadius: 0,
tension: 0,
backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
borderColor: window.chartColors.orange,
fill: fill,
data: efficiency
}]
};
let chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 10,
max: 100
},
scaleLabel: {
display: true,
labelString: 'Percentage'
}
}],
xAxes: [{
//editing this will mess it up pretty bad
}]
},
tooltips: {
callbacks: {
label: function(value, index) {
return index.datasets[value.datasetIndex].label + ": " + value.yLabel;
},
}
}
};
问题是,我尝试了几次编辑 x 轴选项,但它一直弄乱输出
解决方案
您的变量dataDateTime
,出于某种原因,您将其作为标签值中的对象推送,就在这里:
labels.push({dataDateTime});
这就是为什么你得到一个X-axis
标签[Object object]
......你有两种可能的解决方案:
1.改变推送:
labels.push(dataDateTime);
2.为属性添加回调xAxes[0].ticks
:
xAxes: [{
ticks: {
callback: function(value, index, values) {
return value.dataDateTime
}
}
}]
两者都可以正常工作(我测试过),你也可以检查我制作的这个小提琴,检查它是否正常工作(使用第一个解决方案)
推荐阅读
- variables - Python:调用函数后如何停止在函数中获取变量?
- android - 我可以更改密钥库路径,否则我将永远无法更新我的应用程序?
- javascript - 根据订购的总单位设置单价
- arrays - 对关联数组元素进行数值比较后的语法错误标记值
- css - 在 Odoo 的 Qweb 报告中垂直和水平对齐到中间
- javascript - 我如何将 graphQL 查询转换为反应组件?
- javascript - 音频缓冲器的 FFT
- python - 如何在 ElementTree 中使用 xpath 搜索多个属性
- javascript - IndexedDB:有时找不到对象存储
- java - 为什么流这么慢?