Chart.js 绘图未与 xAxis 标签对齐答案

【问题标题】：Chart.js plot not aligned with xAxis labelsChart.js 绘图未与 xAxis 标签对齐
【发布时间】：2020-02-08 10:04:23
【问题描述】：

我使用 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
        }
      }
    ]
  }
}

【问题讨论】：

标签： chart.js vue-chartjs

【解决方案1】：

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

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

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

【讨论】：