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]
        }
    ]

};

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

'last year'和'last month'之间的距离应该大于'last week'和'last month'之间的距离。

任何人都知道我如何使用 chartjs 实现这一点，当我查看 documentation 时，我没有看到任何选项。

Answer 1

您必须使用 chart.js 的扩展，它在数据结构中包含 x 和 y 值的数据。我找到的一个是 Chart.Scatter.

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

Answer 2

您可以使用 Chart.js 散点图类型 (https://www.chartjs.org/docs/latest/charts/scatter.html)。还要记得在 datasets 选项中设置 showLine: true。

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

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

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

Chartjs, plot data based with unequal time intervals

javascript

graph

chart.js