图表.js日期和时间条形图未呈现 - 线条有效

Question

我正在使用图表.js创建一个日期时间条形图，根据上次扫描的日期和时间显示多个服务器中的玩家数量。 但是，由于某种原因，条形图将不会呈现。 如果我使用折线类型图表，它可以很好地呈现。 有谁知道为什么条形图不会呈现？ 我在开发人员工具中没有任何控制台错误。

这是小提琴：

https://jsfiddle.net/j3rmjzpw/2/

.HTML：

<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>

Javascript/jQuery：

$( document ).ready(function() {
renderChartJS("line", "playerChartLine", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});

function renderChartJS(chartType, elemId, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax){
var ticksObj = {
suggestedMin: 0,
beginAtZero: true,   
stepValue: 50,          
}
if(yMax != 0){
ticksObj.max = yMax;
}
if(data.length){
var ctx = document.getElementById(elemId).getContext('2d');
var myChart = new Chart(ctx, {
type: chartType,
data: {
datasets: [{
label: yAxisLabel,
data: data,
borderColor: "rgba(" + rgbaColorStr + ",1)",
backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
}],
},
options: {
responsive: false,
maintainAspectRatio: true,
scaleBeginAtZero: true,
title:
{
display: true,
text: title
},
scales: {
xAxes: [{
type: "time",
display: true,
scaleLabel: {
display: true,
labelString: xAxisLabel
},
ticks: {
minRotation: 90,
maxRotation: 90,
stepValue: 10,
autoSkip: true,
maxTicksLimit: 50
},
time: {
unit: 'minute',
unitStepSize: 10,
max: data[data.length - 1].x
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: yAxisLabel
},
ticks: ticksObj
}]
}
}
});
}
}

底部图表应该是条形图，但它没有正确呈现。

有人知道发生了什么吗？

Answer 1

问题是，条形图不支持您提供的数据格式类型。

您应该使用以下类型的数据格式...

renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players

在这里，第三个参数用于 x 轴labels，第四个参数用于data

而且，这是您的代码的工作版本，并应用了此...

$(document).ready(function() {
renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});
function renderChartJS(chartType, elemId, labels, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax) {
var ticksObj = {
suggestedMin: 0,
beginAtZero: true,
stepValue: 50,
}
if (yMax != 0) {
ticksObj.max = yMax;
}
if (data.length) {
var ctx = document.getElementById(elemId).getContext('2d');
var myChart = new Chart(ctx, {
type: chartType,
data: {
labels: labels,
datasets: [{
label: yAxisLabel,
data: data,
borderColor: "rgba(" + rgbaColorStr + ",1)",
backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
}],
},
options: {
responsive: false,
maintainAspectRatio: true,
scaleBeginAtZero: true,
title: {
display: true,
text: title
},
scales: {
xAxes: [{
type: "time",
display: true,
scaleLabel: {
display: true,
labelString: xAxisLabel
},
ticks: {
minRotation: 90,
maxRotation: 90,
stepValue: 10,
autoSkip: true,
maxTicksLimit: 50
},
time: {
unit: 'minute',
unitStepSize: 10,
max: data[data.length - 1].x
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: yAxisLabel
},
ticks: ticksObj
}]
}
}
});
}
}

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>