javascript - Chart.js 日期和时间条形图不呈现 - 虽然线条有效

Question

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

这是 fiddle :

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>