Chartjs，基于不等时间间隔的绘图数据

Question

我正在用chartjs绘制一个图形，其中x轴表示时间，y轴表示相应的数据。

现在我得到了今天、上周、上月和去年的数据。

var myLineChart = new Chart(ctx).Line(data, options);
var data = {
    labels: ["last year", "last month", "last week", "today"],
    datasets: [
        {
            label: "My First dataset",
            data: [80, 81, 56, 40]
        }
    ]

};

当我绘制图形时，每个点之间的距离是相同的。但这是不正确的，因为时间间隔不相同。

“去年”和“上月”之间的距离应大于“上周”和“上个月”之间的间隔。

任何人一个想法如何我可以实现这与chartjs，当我看留档我没有看到任何选项。

Answer 1

您可以使用图表.js散点图类型 （https://www.chartjs.org/docs/latest/charts/scatter.html）。还要记住在数据集选项中设置显示线：真。

我发现这导致了x轴的起点和终点的间隙。您可以按如下方式输入 x 轴的最小和最大刻度：

scales: {
  xAxes: [
    {
      display: false,
      ticks: { max: maxX, min: minX }
    }
  ],
  yAxes: [
    {
      display: false
    }
  ]
}

Answer 2

您必须使用扩展程序来绘制图表.js该扩展插件在数据结构中同时包含 x 和 y 值的数据。我发现的一个是图表散点。

更长的解释是，默认情况下，您在图表.js中使用的标签只是标签;它们不会被解析为任何类型的x值。