Chartjs：使用Datalabels插件时重叠值

Question

我尝试使用拨号自动下插件数据标签，但它仍然重叠，有什么想法做，使他们不重叠？

以下是我的选择：

const getOptions = (yAxisDisplayLabel, data, previousOpts, isMobile) => ({
  ...previousOpts,
  layout: {
    padding: {
      top: 20,
    },
  },
  plugins: {
    datalabels: {
      font: {
        size: isMobile ? 8 : 12,
      },
      offset: isMobile ? -15 : -20,
      anchor: 'end',
      formatter: (value, context) => data.datasets[context.datasetIndex].displayValue[context.dataIndex],
      display: 'auto',
      align: 'start',
    },
  },
  scales: {
    yAxes: [{
      ticks: {
        display: true,
        fontColor: '#c8c8c8',
        fontSize: isMobile ? 8 : 12,
        fontFamily: 'Futura Book',
        beginAtZero: true,
      },
      gridLines: {
        drawBorder: false,
      },
      scaleLabel: {
        display: true,
        labelString: yAxisDisplayLabel,
      },
    }],
    xAxes: [{
      categoryPercentage: isMobile ? 0.8 : 0.7,
      barPercentage: 1,
      gridLines: {
        display: false,
        drawBorder: false,
      },
    }],
  },
  legend: {
    display: false,
  },
  scaleBeginAtZero: true,
});

Answer 1

简单、非技术性的答案当然是在图表上的其他地方写上单位：€/m2，而不是每一条。