使用 recharts 在 24 小时 X 轴上绘制图表数据，chart.js，我不介意什么

Question

我苦苦挣扎了好几天，试图找出如何在 24 小时 x 轴上显示我的数据。

这是我的数据：

"glucoseMesures": [
        {
            "glucose": 85,
            "date": "2015-06-12T00:49:50+00:00"
        },
        {
            "glucose": 77,
            "date": "2015-06-12T07:09:03+00:00"
        },
        {
            "glucose": 58,
            "date": "2015-06-12T11:23:15+00:00"
        },
        {
            "glucose": 110,
            "date": "2015-06-12T16:00:58+00:00"
        },
        {
            "glucose": 97,
            "date": "2015-06-12T19:35:01+00:00"
        },
        {
            "glucose": 142,
            "date": "2015-06-12T21:15:50+00:00"
        }
    ]

我能够将它们绘制到 Recharts 和 Chart.js 但我似乎无法将它们绘制到时间顺序。使用 Recharts，我能够按时间顺序绘制它们，但无法修改 x 轴标签以显示：

labels: ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "00:00"]

我只需要一个带有标签时间的 X 轴，然后是绘制到葡萄糖时间的数据，对不起，我已经制作了 jsfiddle。我正在使用反应。

我需要的：

Answer 1

您可以使用 Chart.js 内置的 time axis.

轻松完成此操作

诀窍是为 x 轴提供正确的配置值：

unit: hour - 报价基于小时。
stepSize: 3 - 报价每三小时显示一次。
min: "2015-06-12T00:00" - 报价从一天的开始开始。
max: "2015-06-13T00:00" - 报价在第二天开始时结束。

只要您提供的数据集正确排序（按日期时间顺序），您应该会得到如下代码段所示的结果：

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    datasets: [{
      data: [{
          t: "2015-06-12T00:49:50+00:00",
          y: 85
        },
        {
          t: "2015-06-12T07:09:03+00:00",
          y: 77
        },
        {
          t: "2015-06-12T11:23:15+00:00",
          y: 58,
        },
        {
          t: "2015-06-12T16:00:58+00:00",
          y: 110
        },
        {
          t: "2015-06-12T19:35:01+00:00",
          y: 97
        },
        {
          t: "2015-06-12T21:15:50+00:00",
          y: 142
        }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "hour",
          stepSize: 3,
          min: "2015-06-12T00:00",
          max: "2015-06-13T00:00",
          displayFormats: {
            hour: 'HH:mm'
          }
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

使用 recharts 在 24 小时 X 轴上绘制图表数据，chart.js，我不介意什么

chart data on 24hr X axis using recharts, chart.js, I don't mind what

reactjs

chart.js

recharts