時間分散 plot w/ chart.js

Question

我正在嘗試在 (x,y) 數據的 chart.js 中呈現散點圖 plot，其中 x 是日期字符串。 我在網上看到很多示例和教程，其中講師使用 function 為示例圖表生成時間戳，但我還沒有找到任何使用真實數據的示例，就像人們可能收集的那樣。

我有這樣的數據（從 cron 收集）：

2017-07-08T06:15:02-0600,23.375
2017-07-08T06:20:02-0600,23.312
2017-07-08T06:25:02-0600,23.312
2017-07-08T06:30:02-0600,23.25

我在 chart.js 中嘗試了這樣的數據（數據字符串周圍有和沒有“引號”）：

data: [{
  x: 2017-07-08T06:15:02-0600,
  y: 23.375
},{
  x: 2017-07-08T06:20:02-0600,
  y: 23.312
},{
  x: 2017-07-08T06:25:02-0600,
  y: 23.312
},{
  x: 2017-07-08T06:30:02-0600,
  y: 23.25
}],

沒有渲染。 我究竟做錯了什么？

Answer 1

根據散點圖的文檔 ：

與可以以兩種不同格式提供數據的折線圖不同，散點圖僅接受點格式的數據。

因此，您不能使用類似2017-07-08T06:15:02-0600 。 您可以將日期轉換為數字，然后在數據中使用它們。

在您的情況下：

data: [{
        x: 1499516102000,
        y: 23.375
    }, {
        x: 1499516402000,
        y: 23.312
    }, {
        x: 1499516702000,
        y: 23.312
    }, {
        x: 1499517002000,
        y: 23.25
    }
]

現在，您的xAxes將帶有數字，因此您可以使用callback來修改xAxes標簽。

Answer 2

該建議不太正確。 javascript moment.js可以使用日期作為x軸值來分散數據。 由於某種原因，Chart.bundle.js中的捆綁版本不適用於我，因此我直接下載了moment.js。 我正在使用它來設置：

<script src="js/moment.js"></script>
<script src="js/Chart.min.js"></script>

這是我的chart.js數據詳細信息：

data: [
  {x: moment("2017-07-08T06:15:02-0600"), y: 23.375},
  {x: moment("2017-07-08T06:20:02-0600"),y: 23.312},
  {x: moment("2017-07-08T06:25:02-0600"),y: 23.312},
  {x: moment("2017-07-08T06:30:02-0600"),y: 23.25}
],

效果很好！

Answer 3

另一個對我有用的解決方案是只使用圖表的line類型，將其配置為使用 x 軸的日期，並另外禁用線條，使其看起來像散點圖。

new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                x: 2017-07-08T06:15:02-0600,
                y: 23.375
              },{
                x: 2017-07-08T06:20:02-0600,
                y: 23.312
              },{
                x: 2017-07-08T06:25:02-0600,
                y: 23.312
              },{
                x: 2017-07-08T06:30:02-0600,
                y: 23.25
            }]
          },
          options: {
            showLine: false,
            scales: {
              x:{
                type: 'time',
                display: true,
                title: {
                  display: true,
                  text: 'Date'
                },
              },
            }
          }
       }
    );

我認為這是一個非常優雅的解決方案。 該文檔甚至指定：

散點圖支持所有與折線圖相同的屬性。 默認情況下，散點圖會將折線圖的 showLine 屬性覆蓋為 false。

Answer 4

我無法從這些答案中找到一個有效的例子，所以這是我的。

new Chart(document.getElementById("chart"), {
    type: "line",
    data: {
      datasets: [
        {
          showLine: false,
          fill: false,
          data: [
            {
              x: new Date(Date.now()),
              y: 100,
            },
            {
              x: new Date(Date.now() + 1000 * 60 * 60),
              y: 200,
            },
            {
              x: new Date(Date.now() + 2000 * 60 * 60),
              y: 300,
            },
            {
              x: new Date(Date.now() + 3000 * 60 * 60),
              y: 400,
            },
          ],
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: false,
        },
        title: {
          text: "Chart.js Time Scale",
          display: true,
        },
      },
      scales: {
        x: {
          type: "time",
          time: {
            unit: "hour",
            // Luxon format string
            // tooltipFormat: "DD T",
          },
          title: {
            display: true,
            text: "Hour",
          },
        },
        y: {
          title: {
            display: true,
            text: "value",
          },
        },
      },
    },
 });

我從這里提取它： https://www.chartjs.org/docs/latest/samples/scales/time-line.html

您需要安裝 momentjs 及其適配器： npm install moment chartjs-adapter-moment --save

..然后導入所有庫，例如

import Chart from "chart.js/auto";
import "chartjs-adapter-moment";