ChartJS 最小和最大标签定位

sgtfey8w  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(163)

我想知道在位置“开始”或“内部”定义最小和最大标签
而其他标签在这两者之间的中心位置,
我用的是ChartJS 4。2.1
我现在正在尝试的

const options = {
    responsive: true,
    scales: {
      x: {
        position: 'top',
        grid: {
          display: true,
          drawOnChartArea: false,
        },

        ticks: {
          color: 'blue',
          maxRotation: 0,
          min: {
            position: 'start',
          },
          max:{
            position: "start"
          }
        },
      },
      y: {
        reverse: true,
        grid: { display: true, drawOnChartArea: false },
      },
    },

    plugins: {
      legend: {
        display: false,
      },
      labels: {
        position: 'right',
      },
    },
  };
6l7fqoea

6l7fqoea1#

axis的min和amx选项可以接受用户的最小值和最大值。但您可以将刻度的对齐选项设置为“inner”。以这种方式,最小值和最大值与图表区域的左侧(最小值)和右侧(最大值)对齐。

scales: {
  x: {
    position: 'top',
    grid: {
      display: true,
      drawOnChartArea: false,
    },

    ticks: {
      color: 'blue',
      align: 'inner', // <-- to add, removing min and max setting
      maxRotation: 0,
    },
  },
  y: {
    reverse: true,
    grid: { display: true, drawOnChartArea: false },
  },
},

相关问题