如何在数据标签中给出分界线

Question

如何给数据标签中的断行，直到我做了什么下面是链接，我已经粘贴代码在这里也。

我使用的是自定义的datalabel，我想添加断线。

https:/jsfiddle.net0x3ct8aq4

<script>

    onComplete () {

       const chartInstance = this.chart;
      const ctx = chartInstance.ctx;
      const dataset = this.data.datasets[0];
      const meta = chartInstance.controller.getDatasetMeta(0);

      Chart.helpers.each(meta.data.forEach((bar, index) => {

        const label = this.data.customlabels[index];
        const labelPositionX = 20;
        const labelWidth = ctx.measureText(label).width + labelPositionX;

        ctx.textBaseline = 'bottom';
        ctx.textAlign = 'center';
        ctx.fillStyle = '#fff';
        console.log(label.x);
        ctx.fillText(label, bar._model.x, bar._model.y);

      }));


    }
  } 
    },



});
</script>

Answer 1

里面的 animation.onComplete() 功能，您可以 reverse() 标签数组，然后使用 forEach() 兹作如下修改。

label.reverse().forEach((l, i) => ctx.fillText(l, bar._model.x, bar._model.y - (i * 16)))

请看一下你的修改意见 JSFiddle