Chartjs：使用 Datalabels 插件时的重叠值答案

【问题标题】：Chartjs: Overlapping values when using Datalabels pluginChartjs：使用 Datalabels 插件时的重叠值
【发布时间】：2019-08-03 05:22:47
【问题描述】：

我正在使用 datalabels 插件，如果它们太长，值会重叠：

我尝试在插件数据标签下使用diaply auto，但它仍然重叠，有什么想法可以使它们不重叠吗？

这是我的选择：

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,
});

【问题讨论】：

标签： chart.js

【解决方案1】：

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

【讨论】：