如何更改图表中的X轴标签位置。 X轴标签应在图表内而不是外部显示

Question

Invision Image链接此处

我使用的是Angular 13和Chart.js 3.7.1。我想让X轴标签应在栏旁边和图表内移动，而不是在图表外显示。

Answer 1

这可以通过 chartjs-plugin-datalabels 来完成。它提供了许多用于定位标签的选项。

请看一下下面的可运行代码，看看它是如何完成的。

Chart.register(ChartDataLabels);
new Chart("barChart", {
  type: 'bar',
  data: {
    labels: ['One', 'Two', 'Three', 'Four'],
    datasets: [{
      label: 'Data',
      data: [5, 8, 24, 14],
      backgroundColor: 'rgb(124, 124, 255)'
    }]
  },
  options: {
    plugins: {
      datalabels: {
        align: 'left',
        rotation: -90,
        offset: 50,
        font: {
          weight: 'bold'
        },
        formatter: (v, ctx) => ctx.chart.data.labels[ctx.dataIndex]
      }
    },
    scales: {
      x: {
        ticks: {
          display: false
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="barChart" height="100"></canvas>