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

};

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

去年＆＃39;之间的距离。和上个月＆＃39;应该大于上周之间的距离＆＃39;和上个月＆＃39;。

任何人都知道如何通过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）。另请记住在showLine: true选项中设置datasets。

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

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

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

2 个答案: