在x轴上显示所有标签在图表中。

Question

我是Chart.js的新手，我一直在寻找一种在图表中显示所有标签的方法，无论标签是否有数据，我都尝试了最大和最小值，但它不起作用，所以我遇到了壁虱回调：

let ctx = document.getElementById("chart").getContext("2d");
let config = {
  type: "bar",
  data: {
    datasets: [
      {
        label: "cost of goods sold",
        data: [0, 20, 40, 50],
      },
    ],
    //labels: ["January", "February", "March", "April"],
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: (value, index, ticks) => {
            const x = [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July",
              "August",
              "September",
              "october",
              "November",
              "December",
            ];
            return x;
          },
        },
      },
    },
  },
};

let chart = new Chart(ctx, config);

但是它没有起作用。 有没有办法显示所有固定标签，例如始终显示12个月，31天，12周

Answer 1

您可以定义data.labels，并确保data.datasets.data具有相同数量的条目，null对于缺失值。

let config = {
  type: "bar",
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "october", "November", "December"],
    datasets: [{
      label: "cost of goods sold",
      data: [0, 20, 40, 50, null, null, null, null, null, null, null, null]
    }]
  }
};

new Chart('chart', config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" height="80"></canvas>