X轴上的标签不会在图表中完全显示

Question

我有一个来自后端的数据（烧瓶 - 塞拉尔奇与mysql），其中数据包含一周，月和年的整数日期，看起来像这样：

在这种情况下，x代表一年中的一周：

let month_true = [
  {
    bob: {
      "base-certificate": 60,
      "case-certificate": 1,
      "standard-certificate": 7,
    },
    x: 9,
  },
  {
    bob: {
      "base-certificate": 30,
      "case-certificate": 4,
      "standard-certificate": 5,
    },
    x: 11,
  },
];

我所做的第一件事是要映射数据并将X更改为JavaScript和Chart.js的可读格式，使用将一周中的一周数转换为实际日期的函数：

函数：

 function getDateOfWeek(w, y) {
      var d = 1 + (w - 1) * 7; // 1st of January + 7 days for each week
    
      return new Date(y, 0, d);
    }

通过数据映射：

let newData = month_true.map(function (m) {
  let dateObject = new Date();
  let year = dateObject.getFullYear();
  const weekDate = getDateOfWeek(m.x, year);

  let r = new Date(Date.parse(weekDate));
  const newd = {
    x: r.setHours(0, 0, 0, 0),
    base: m.bob["base-certificate"],
    case: m.bob["case-certificate"],
    standard: m.bob["standard-certificate"],
  };
  return newd;
});

let newdate = newData.map(function (d) {
  return d.x;
});

现在构造图表：

let ctx = document.getElementById("chart").getContext("2d");
let config = {
  //labels: newdate,
  type: "bar",
  data: {
    datasets: [
      {
        label: "base",
        data: newData,
        parsing: {
          xAxisKey: "x",
          yAxisKey: "base",
        },
      },
      {
        label: "Case",
        data: newData,
        parsing: {
          xAxisKey: "x",
          yAxisKey: "case",
        },
      },
      {
        label: "Standard",
        data: newData,
        parsing: {
          xAxisKey: "x",
          yAxisKey: "standard",
        },
      },
    ],
  },
  options: {
    scales: {
      x: {
        ticks: {
          beginAtZero: true,
        },
        offset: true,
        type: "time",
        time: {
          //isoWeekday: true,
          unit: "week",
        },
      },
    },
  },
};

let myChart = new Chart(ctx, config);

它已绘制但已绘制，但是X轴未显示第二个标签：

在这里输入图像描述

我能做什么tomake标签完全出现了吗？

Answer 1

这是因为默认情况下，时间尺度自动生成ticks，如果您不想包含数据中的标签，则需要设置tick。source。

options: {
  scales: {
    x: {
      type: 'time',
      ticks: {
        source: 'data'
      }
    }
  }
}