Chartjs显示数字而不是时间

Kev*_*ton 4 javascript chart.js

我正在尝试在X轴上放置时间刻度。我试图在下面编写一个更简单且可复制的代码。 我可以通过删除options块使其正常运行,但它会将时间显示为对观看者来说只是表面上毫无意义的数字。如何在X轴上显示时间?我是否缺少一些外部资源?

注意1:javascript文件是一个单独的文件,画布/元素“ myChart”位于html文件中。


HTML:

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
<canvas  id="myChart" style="position: relative; width: 100%; max-height: 500px; max-width: 1000px;" ></canvas>
Run Code Online (Sandbox Code Playgroud)

错误:(myScript.js是有问题的文件)

Chart.min.js:7 Uncaught Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
    at ri.oi (Chart.min.js:7)
    at i.update (Chart.min.js:7)
    at Chart.min.js:7
    at Object.each (Chart.min.js:7)
    at Object.update (Chart.min.js:7)
    at ni.updateLayout (Chart.min.js:7)
    at ni.update (Chart.min.js:7)
    at ni.construct (Chart.min.js:7)
    at new ni (Chart.min.js:7)
    at myScript.js:191
oi @ Chart.min.js:7
update @ Chart.min.js:7
(anonymous) @ Chart.min.js:7
each @ Chart.min.js:7
update @ Chart.min.js:7
updateLayout @ Chart.min.js:7
update @ Chart.min.js:7
construct @ Chart.min.js:7
ni @ Chart.min.js:7
(anonymous) @ myScript.js:191
Run Code Online (Sandbox Code Playgroud)

Javascript:

pt1 = new Date("2019-03-15T23:36:35.316Z");
pt2 = new Date("2019-03-17T23:32:11.114Z");

var ctx = document.getElementById('myChart').getContext('2d');
var myBubbleChart =new Chart(ctx, {
type: 'bubble',
data: {
  datasets: [
    {
      label: ["pt1"],
      data: [{
        x: pt1,
        y: 1,
        r: 10
      }]
    }, {
      label: ["pt2"],
      data: [{
        x: pt2,
        y: 1,
        r: 10
      }]
    }
  ]
},
options: {
    scales: {
        xAxes: [{
            type: 'time',
            distribution: 'series'
        }]
    }
}

});
Run Code Online (Sandbox Code Playgroud)

小智 15

我遇到了同样的问题并尝试了 Kevin 的解决方案,但没有奏效。我发现有必要将 moment 脚本放在 chartjs 脚本之前,无论我使用什么版本,这都为我解决了问题。


Kev*_*ton 7

事实证明,该解决方案需要版本控制(这是我使用的版本):

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

  • 好吧,你让我开心了一天。 (3认同)

Yga*_*bel 7

您必须使用已经包含 Moment.js 的 Chartjs 捆绑版本

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.js"></script>
Run Code Online (Sandbox Code Playgroud)