如何修复 ChartJS 中超过限制的 y 轴值

大家好！

我在用chartjs-plugin-datalabels通过在条形上方显示值来防止不可悬停的微小值，但是当其中一个具有最高值时，数据标签超出了图表容器的限制

UPDATE:

另外，您可以使用suggestedMax选项，我认为这比提供填充更好

const options = {
  plugins: {
    datalabels: {
      color: '#374774',
      font: { family: 'MyriadSemiBold', size: 14 },
      align: 'end',
      anchor: 'end',
      formatter: (value) => {
        if (value > 0) {
          return localizeNumber(value)
        }

        return ''
      },
    },
    legend: { display: false },
  },
  scales: {
    x: {
      grid: { lineWidth: 0 },
      ticks: {
        display: false,
      },
    },
    y: {
      // Highest value in your datasets
      suggestedMax: highestValue > 0 ? highestValue + 1e5 : 10,
      grid: { color: '#DFDFDF' },
      ticks: {
        callback: (value) => {
          return abbreviateNumber(value)
        },
        font: { family: 'MyriadRegular', size: 14 },
        color: '#374774',
      },
    },
  },
}

最简单的解决方案是添加填充 https://www.chartjs.org/docs/latest/general/padding.html到图表的顶部（下面是简单的示例）。您还可以使用 datalabel 插件clamping https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#clamping当标签位于图表之外时调整标签位置的选项。

const layoutOptions =  {
    padding: {
        top: 30  // Add 30 pixels of padding to top of chart.
    }
};

const data = {
    labels: ['Large', 'Small'],
    datasets: [{ data: [100, 2] }]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        layout: layoutOptions,
        scales: { y: { beginAtZero: true, max: 100 } },
        plugins: {
            legend: { display: false },
            datalabels: { anchor: 'end', align: 'top' }
        }
    },
};

new Chart(document.getElementById('myChart'), config);

#myChart {
    max-height: 180px;
}

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection"></script>
<script>Chart.register(ChartDataLabels);</script>