Question

我正在尝试在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>

错误：（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

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'
        }]
    }
}

});

Answer 1

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

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.js"></script>

Answer 2

我遇到了同样的问题，并尝试了凯文（Kevin）的解决方案，但没有成功。我发现有必要将力矩脚本放置在chartjs脚本之前，无论使用什么版本，都可以为我解决问题。

Answer 3

事实证明，该解决方案需要版本控制（这是我使用的版本）：

Response.Redirect("/<your page>");

Answer 4

如果你使用的是 npm

npm install moment chartjs-adapter-moment --save-dev

在您的文件中

import { Chart } from 'chart.js'
import 'chartjs-adapter-moment';

https://github.com/chartjs/chartjs-adapter-moment

Answer 5

尝试将chartkick gem用作导轨时，我遇到了相同的错误。解决方案是安装SELECT o.col1, o.col2, . . ., CAST(CAST(OId AS bigint) AS nvarchar(255)) as OId FROM Order o;（moment.js）并放入

npm install moment --save

在<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

中

Chartjs显示数字而不是时间

5 个答案: