next.js React Chart.js为显示格式化日期的xAxes提供相等的间隙

k5ifujac  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(106)

在scales.x中添加显示器后,现在我的xAxes标签根据它包含的数据对象具有不同的间隙。我如何使我的xAxes标签以相等的间隙显示?下面的代码如下图所示。请记住,我仍然需要使用显示器来格式化我的数据。


的数据

const levelHistoryOptions = {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: {
        top: 20,
        bottom: 20,
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      datalabels: {
        color: theme.palette.primary.main,
        anchor: "end",
        align: "top",
        font: {
          size: 16, // Adjust the font size as needed
        },
        formatter: (value, context) => {
          return context.chart.data.datasets[context.datasetIndex].data[
            context.dataIndex
          ];
        },
      },
    },
    scales: {
      x: {
        type: "time",
        time: {
          unit: "day",
          displayFormats: {
            day: "MM월 dd일",
          },
        },

        offset: true,
        ticks: {
          source: "data",
          font: {
            size: 16,
          },
          color: theme.palette.primary.main,
        },
        grid: {
          color: theme.palette.mode === "dark" ? "#555" : "#ccc",
        },
        border: { color: theme.palette.mode === "dark" ? "#555" : "#ccc" },
      },
      y: {
        offset: true,
        display: false,
        beginAtZero: false,
      },
    },
  };

字符串

r6hnlfcb

r6hnlfcb1#

你应该将x轴定义为type: 'timeseries',如下所示:

options: {
  scales: {
    x: {
      type: 'timeseries',
      ...

字符串
有关详细信息,请参阅Chart.js文档中的Time Series Axis

相关问题