具有稀疏数据点的 Chart.js 日期 x 轴答案

【问题标题】：Chart.js date x-axis with sparse datapoints具有稀疏数据点的 Chart.js 日期 x 轴
【发布时间】：2020-02-25 14:26:30
【问题描述】：

我想创建一个像这样的阶梯线图，其中 x 轴的数据点稀疏，但希望比例保持不变。

例如，我拥有的一些数据如下，我希望在没有给定数据点的日期之间绘制水平线。

    "labels": ["05-Jul-07", "06-Dec-07", "07-Feb-08", "10-Apr-08", "08-Oct-08", "06-Nov-08", "04-Dec-08", "08-Jan-09", "05-Feb-09", "05-Mar-09", "04-Aug-16", "02-Nov-17", "02-Aug-18"],
    "datasets": [{
        "data": [
    { x: "05-Jul-07", y: 0.0575 },
    { x: "06-Dec-07", y: 0.055 },
    { x: "07-Feb-08", y: 0.0525 },
    { x: "10-Apr-08", y: 0.05 },
    { x: "08-Oct-08", y: 0.045 },
    { x: "06-Nov-08", y: 0.03 },
    { x: "04-Dec-08", y: 0.02 },
    { x: "08-Jan-09", y: 0.015 },
    { x: "05-Feb-09", y: 0.01 },
    { x: "05-Mar-09", y: 0.005 },
    { x: "04-Aug-16", y: 0.0025 },
    { x: "02-Nov-17", y: 0.005 },
    { x: "02-Aug-18", y: 0.0075 }
  ],

但这给了我每个给定点的标签，没有任何时间尺度

感谢您在学习这个新库（使用新语言）方面的帮助，谢谢！

这是图表代码：

<script type="text/javascript">
var ctx = document.getElementById('baserates').getContext('2d');
new Chart(ctx, {
  "type": "line",
  "data": {
    "labels": ["05-Jul-07", "06-Dec-07", "07-Feb-08", "10-Apr-08", "08-Oct-08", "06-Nov-08", "04-Dec-08", "08-Jan-09", "05-Feb-09", "05-Mar-09", "04-Aug-16", "02-Nov-17", "02-Aug-18"],
    "datasets": [{
      "data": [
        { x: "05-Jul-07", y: 0.0575 },
        { x: "06-Dec-07", y: 0.055 },
        { x: "07-Feb-08", y: 0.0525 },
        { x: "10-Apr-08", y: 0.05 },
        { x: "08-Oct-08", y: 0.045 },
        { x: "06-Nov-08", y: 0.03 },
        { x: "04-Dec-08", y: 0.02 },
        { x: "08-Jan-09", y: 0.015 },
        { x: "05-Feb-09", y: 0.01 },
        { x: "05-Mar-09", y: 0.005 },
        { x: "04-Aug-16", y: 0.0025 },
        { x: "02-Nov-17", y: 0.005 },
        { x: "02-Aug-18", y: 0.0075 }
      ],
      "fill": true,
      "backgroundColor": "rgb(192,217,255)",
      "borderColor": "rgb(0,98,251)",
      "lineTension": 0.1,
      steppedLine: true
    }]
  },
  "options": {
    "legend": {
      "display": false
    }
  }
});
</script>

【问题讨论】：

您能否向我们展示您的代码，以便我们了解您取得的成果？
@HeadhunterKev 我已经添加了代码，谢谢！
查看spanGaps 设置折线图的样式。考虑使用散点图也可以轻松指定 x 轴值（使用折线图，您不能）。

标签： chart.js

【解决方案1】：

这个呢？ My code in the JSBin

只需使用时间刻度。如果需要，您可以将其设置为我在 JSBin 中准备的特定单位。否则 chart.js 会自动决定单位。

options:
  scales: {
    xAxes: [{
      type: 'time'
    }]
  }
}

请注意，我将填充颜色更改为 rgba，以便您可以看到网格线。如果您不想这样做，则无需这样做。我所做的另一个更改是删除标签属性，因为如果您遵循提供 x 和 y 值的数据格式，则不需要它。

您还应该注意，右侧的垂直线被切断了。我不知道解决该问题的方法，也找不到解决方案。在您的示例图像中，它运行良好。我很想听听你的解决方案！

【讨论】：