Question

使用Chart.js，我试图让x轴（和工具）显示DATE，但我能得到的只是大整数显示为x轴标签。我已经比较了文档中的示例，我不知道它在做什么，我不是。有人可以帮忙吗？

这是我创建的一个小例子，显示它不起作用。（顺便说一句 - 作为一个侧面问题，请注意，如果RED线的颜色拼写为红色而不是红色，则该线看起来正常，但工具提示不再适用于该线） https://plnkr.co/edit/CKUf4zFC1vhe3VNUF5Lf?p=preview

javascript for the above plunker example is below
----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <div>
    <canvas id="canvas"></canvas>

    <script>
      var chartData = {
        datasets: [{
          borderColor: 'Red',
          label: 'Capital R in borderColor, tooltips dont work',
          data: [{
            x: new Date('2011-04-11T11:45:00'),
            y: 25
          }, {
            x: new Date('2011-04-11T12:51:00'),
            y: 28
          }, {
            x: new Date('2011-04-11T14:10:00'),
            y: 22
          }, {
            x: new Date('2011-04-11T15:15:00'),
            y: 18
          }]
        }, {
          borderColor: 'green',
          label: 'borderColor all lower case, tooltips now work',
          data: [{
            x: new Date('2011-04-11T11:45:00'),
            y: 15
          }, {
            x: new Date('2011-04-11T12:51:00'),
            y: 18
          }, {
            x: new Date('2011-04-11T14:10:00'),
            y: 12
          }, {
            x: new Date('2011-04-11T15:15:00'),
            y: 8
          }]
        }, ]
      };


      window.onload = function() {

        var ctx = document.getElementById("canvas").getContext("2d");
        window.myScatterxx = Chart.Scatter(ctx, {
          data: chartData,
          scaleType: 'date',
          options: { title: { display: true, text: "scaleType='date' isn't working", fontSize:36} },
        });
      };
    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js">
    </script>

</body>
</html>

Answer 1

首先，由于文档很混乱，我并不感到惊讶你没有得到如何创建时间尺度图表。实际的电话如下：

window.myScatterxx = Chart.Scatter(ctx, {
    data: chartData,
    options: {
        title: {
            display: true,
            text: "it is now working",
            fontSize: 36
        },
        scales: {
            xAxes: [{
                // This is the important part
                type: "time",
            }]
        }
    },
});

<小时/> 现在您拥有正确的语法，您也需要导入正确的库。正如我在您给出的代码中看到的那样，您导入了Chart.min.js，但是由于您知道使用time元素，因此需要更多。

你可以：

导入Moment.js（CDN link），然后导入Chart.min.js。
导入Chart.bundle.min.js，其中包含Moment和Chart库。

<小时/> 最后，我还注意到在代码中显示红色数据集的工具提示时出现问题。这是因为您将其颜色定义为Red。将其更改为red，工具提示将再次有效：

datasets: [{
    borderColor: 'red',
    label: 'Capital R in borderColor, tooltips now work',
    data: [
        // ...
    ]
}]

您可以看到所有这些修复程序in this jsFiddle，这是最终结果：

Chart.js - scaleType ='date'无效

1 个答案: