Chart.js带有稀疏数据点的日期x轴

Question

我想创建这样的阶梯状折线图，其中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>

Answer 1

那呢？ My code in the JSBin

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

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

请注意，我将填充颜色更改为rgba，以便可以看到gridLines。如果您不想这样做，则不需要这样做。我进行的另一项更改是删除了标签属性，因为如果遵循给出x和y值的数据格式，则不需要标签属性。

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