如何在数据标签中给出断线答案

【问题标题】：How to give break line in data label如何在数据标签中给出断线
【发布时间】：2019-05-03 04:39:03
【问题描述】：

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

我正在使用自定义数据标签，我想添加断线





<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>

【问题讨论】：

标签： chart.js chart.js2

【解决方案1】：

在animation.onComplete() 函数中，您可以reverse() 标签数组，然后使用forEach() 绘制单个标记，如下所示：

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

请查看您修改后的JSFiddle

【讨论】：