图表js日期和时间条形图未呈现-但线条可行

我正在使用图表。js创建一个日期时间条形图,根据上次扫描的日期和时间显示多个服务器中的玩家数量。但是,由于某些原因,条形图不会呈现。如果我使用线型图,它渲染得很好。有人知道为什么条形图不会呈现吗?我在开发者工具中没有任何控制台错误。

这是小提琴:

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

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

$( 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
                    }]
                }

            }
        });
    }
}

底部图表应该是条形图,但渲染不正确。