X 轴上带有日期的 ChartJS 不显示任何图形

Question

我有一个 Vue.JS 项目从 REST API 获取数据（我的，所以我可以根据需要修改它）。此数据的格式为 Chart.JS。我应该显示一个包含 3 个数据集的图表，其中 2 个是具有相同 X 值的 line 类型，但是 1 个是具有不同 X 值的 bar 类型（这就是我不想指定标签的原因）。不管怎样，所有的 X 值都是日期，所以我只想要所有曲线的 1 个 X 轴。

我正在使用 (x,y) 数据格式的数据集：

x 是一个 ISO8601 日期
y 是一个浮点数

我的问题是什么都没有显示...有人可以帮助我吗，我不明白为什么。我觉得自己做对了事情。我在某处看到我需要包含 momentjs，但在官方文档中他们说情况并非如此。我敢打赌问题来自日期，因为我尝试更改 y 值，并且修改了 2 个 y 轴边界（因此可以理解 y 值）。我也尝试添加“xAxisID”选项，没有任何改变。

这是我的数据样本（通常有数百个值）：

{
  "type": "line",
  "data": {
    "datasets": [
      {
        "label": "Température",
        "borderColor": "red",
        "backgroundColor": "red",
        "fill": false,
        "data": [
          {
            "x": "2020-07-05T15:38:47.933711",
            "y": 2.8224692
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 33.63129
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 40.540405
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 3.0312533
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 49.145626
          }
        ],
        "yAxisID": "yAxeTemperature"
      },
      {
        "label": "Humidité",
        "borderColor": "blue",
        "backgroundColor": "blue",
        "fill": false,
        "data": [
          {
            "x": "2020-07-05T15:38:47.933711",
            "y": 33.980587
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 2.0313625
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 24.249685
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 7.4426904
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 2.6335742
          },
          {
            "x": "2020-07-05T16:28:48.175547",
            "y": 25.92827
          }
        ],
        "yAxisID": "yAxeHumidite"
      }
    ]
  },
  "options": {
    "responsive": true,
    "hoverMode": "index",
    "stacked": false,
    "title": null,
    "scales": {
      "xAxes": [
        {
          "type": "time",
          "display": true,
          "position": "bottom",
          "id": "xAxeTime",
          "scaleLabel": {
            "display": true,
            "labelString": "Temps",
            "fontColor": "black"
          },
          "time": {
            "unit": "minute",
            "parser": "moment.ISO_8601",
            "tooltipFormat": "ll"
          }
        }
      ],
      "yAxes": [
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeTemperature",
          "scaleLabel": {
            "display": true,
            "labelString": "Température",
            "fontColor": "red"
          }
        },
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeHumidite",
          "scaleLabel": {
            "display": true,
            "labelString": "Humidité",
            "fontColor": "blue"
          }
        }
      ]
    }
  }
}

下面是我的图表是如何创建的（使用 vue-chartjs 和 chart.js）：

createChart(chartId : string, chartData : GrapheBean) {
      const ctx = document.getElementById(chartId);
      // @ts-ignore
      const myChart = new Chart(ctx, {
        type: chartData.type,
        data: chartData.data,
        options: chartData.options,
      });
    }

这是结果：

我现在被困住了，即使我还在尝试一些希望渺茫的事情。非常感谢那些能帮助我的人。

Answer 1

首先你应该删除选项xAxes.time.parser。当日期为ISO8601格式时不需要。

进一步 Chart.js 在内部有效地使用 Moment.js 来实现 Chart.js 的 time axis. Therefore you should use the bundled version 的功能，在单个文件中包含 Moment.js。

请在纯 JavaScript 版本中查看您修改后的代码。

const chartData = {
  "type": "line",
  "data": {
    "datasets": [{
        "label": "Température",
        "borderColor": "red",
        "backgroundColor": "red",
        "fill": false,
        "data": [{
            "x": "2020-07-05T15:38:47.933711",
            "y": 2.8224692
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 33.63129
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 40.540405
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 3.0312533
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 49.145626
          }
        ],
        "yAxisID": "yAxeTemperature"
      },
      {
        "label": "Humidité",
        "borderColor": "blue",
        "backgroundColor": "blue",
        "fill": false,
        "data": [{
            "x": "2020-07-05T15:38:47.933711",
            "y": 33.980587
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 2.0313625
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 24.249685
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 7.4426904
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 2.6335742
          },
          {
            "x": "2020-07-05T16:28:48.175547",
            "y": 25.92827
          }
        ],
        "yAxisID": "yAxeHumidite"
      }
    ]
  },
  "options": {
    "responsive": true,
    "hoverMode": "index",
    "stacked": false,
    "title": null,
    "scales": {
      "xAxes": [{
        "type": "time",
        "display": true,
        "position": "bottom",
        "id": "xAxeTime",
        "scaleLabel": {
          "display": true,
          "labelString": "Temps",
          "fontColor": "black"
        },
        "time": {
          "unit": "minute",
          // "parser": "moment.ISO_8601", -> remove this line
          "tooltipFormat": "ll"
        }
      }],
      "yAxes": [{
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeTemperature",
          "scaleLabel": {
            "display": true,
            "labelString": "Température",
            "fontColor": "red"
          }
        },
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeHumidite",
          "scaleLabel": {
            "display": true,
            "labelString": "Humidité",
            "fontColor": "blue"
          }
        }
      ]
    }
  }
}

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
  type: chartData.type,
  data: chartData.data,
  options: chartData.options,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>

In your question you also wrote "I am supposed to display a graph with 3 datasets, 2 of type line with the same X values, but 1 of type bar with different X values". Your code however only defines 2 datasets. In case you're also facing problems with this point, please post a new question for this separate issue.

X 轴上带有日期的 ChartJS 不显示任何图形

ChartJS with dates on the X axis not displaying any graph

chart.js

momentjs

vue-chartjs