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

我想创建一个像这样的阶梯形折线图，其中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 }
  ],

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

我非常感谢您帮助我学习这个新的图书馆（使用一种新的语言），谢谢

以下是图表代码：

var ctx=document.getElementById（'baserates'）.getContext（'2d'）；
新图表（ctx{
“类型”：“行”，
“数据”：{
“标签”：[“07年7月05日”、“07年12月06日”、“08年2月07日”、“08年4月10日”、“08年10月08日”、“08年11月06日”、“08年12月04日”、“09年1月08日”、“09年2月05日”、“09年3月05日”、“16年8月04日”、“17年11月02日”、“18日02日”]，
“数据集”：[{
“数据”：[
{x:“2007年7月5日”，y:0.0575}，
{x:“06-Dec-07”，y:0.055}，
{x:“08年2月7日”，y:0.0525}，
{x:“2008年4月10日”，y:0.05}，
{x:“08-10-08”，y:0.045}，
{x:“08年11月6日”，y:0.03}，
{x:“04-Dec-08”，y:0.02}，
{x:“08-Jan-09”，y:0.015}，
{x:“09年2月5日”，y:0.01}，
{x:“09年3月5日”，y:0.005}，
{x:“2016年8月4日”，y:0.0025}，
{x:“2017年11月2日”，y:0.005}，
{x:“2018年8月2日”，y:0.0075}
],
“填充”：正确，
“背景色”：“rgb（192217255）”，
“边框颜色”：“rgb（0,98251）”，
“线张力”：0.1，
草原线：对
}]
},
“选择”：{
“传奇”：{
“显示”：错误
}
}
});

这个怎么样

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

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

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

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

这个怎么样

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

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

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

---

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

你能给我们看一下你的代码吗，这样我们就可以看到你取得了什么成就了吗？@HeadhunterKev我已经添加了代码，谢谢！查看用于设置折线图样式的设置。考虑使用散点图，也可以很容易地指定X轴值（用线图，你不能）。你能给我们看看你的代码，这样我们就可以看到你的成就了吗？@ Head HuntKeEV我添加了代码，谢谢！查看用于设置折线图样式的设置。考虑使用散点图，也可以很容易地指定X轴值（用线图，你不能）。