Chart.js 图未与 xAxis 标签对齐

Question

我使用 Chart.js 创建了以下散点图图表，由于某种原因，绿点未与 xAxis 标签对齐。请注意，我正在使用 vue-chart.js 在 Vue.js 应用程序中执行此操作，但我认为这不是原因。知道如何对齐绘图和 xAxis 标签吗？

data: {
  labels: this.sessionLabels, // Example: ["2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T16:42:39", "2020-02-07T16:42:39"...]
  datasets: [
    {
      label: "Session",
      backgroundColor: "#42b983",
      data: this.sessions // Example: [{x:1, y:0}, {x:2, y:0}, {x:3, y:0}, ...]
    }
  ]
},
options: {
  title: {
    display: true,
    text: "Sessions executed over the last 7 days",
    fontColor: "#ffffff",
    fontSize: "14",
    fontStyle: "normal"
  },
  legend: {
    display: false
  },
  scales: {
    xAxes: [
      {
        ticks: {
          callback: function(value, index, values) {
            return this.sessionLabelsAlias[index];
          }.bind(this)
        }
      }
    ],
    yAxes: [
      {
        ticks: {
          max: 100,
          min: 0,
          stepSize: 10
        }
      }
    ]
  }
}

Answer 1

主要问题是您的 sessionLabels 包含相同的值。

此外，当显式定义 labels 时，您的数据应该只是一组值，每个值对应于相同位置的标签。

[0, 0, 0, 0, 0 ...]

Chart.js 图未与 xAxis 标签对齐

Chart.js plot not aligned with xAxis labels

chart.js

vue-chartjs