將數據 label 右對齊。 水平條形圖Vue JS

Question

我試圖將數據 label 對齊到 canvas 的右側。 有沒有辦法將標簽向右移動？ 這是我配置標簽的方式

plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          let dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map(data => {
            sum += data;
          });
          let percentage = ((value * 100) / sum).toFixed(2) + "%";
          return percentage;
        },
        color: "#000",
        align: "right",
        anchor: "end",
        offset: "70"
      },
      drawBorder: true
    },

Answer 1

插件核心 API提供了一系列可用於執行自定義代碼的鈎子。 您可以使用afterDraw鈎子直接在 canvas 上使用CanvasRenderingContext2D.fillText()繪制文本，如下所示：

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.font = "12px Arial";
    let sum = chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0);
    var xAxis = chart.scales['x-axis-0'];
    var yAxis = chart.scales["y-axis-0"];
    yAxis.ticks.forEach((v, i) => {
      var label = chart.data.labels[i];
      var value = chart.data.datasets[0].data[i];
      var x = xAxis.getPixelForValue(value) + 5;
      var y = yAxis.getPixelForTick(i);
      let percent = (value * 100 / sum).toFixed(2);
      ctx.fillText(label + ' (' + percent + '%)', x, y);
    });
    ctx.restore();
  }
}],

您可能還必須在圖表右側定義一些padding ，以確保所有標簽都顯示在canvas上。

options: {
  layout: {
    padding: {
      right: 110
    }
  },

請查看下面的可運行代碼片段。

 const chart = new Chart(document.getElementById('myChart'), { type: 'horizontalBar', plugins: [{ afterDraw: chart => { var ctx = chart.chart.ctx; ctx.save(); ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.font = "12px Arial"; let sum = chart.config.data.datasets[0].data.reduce((v, s) => v + s, 0); var xAxis = chart.scales['x-axis-0']; var yAxis = chart.scales["y-axis-0"]; yAxis.ticks.forEach((v, i) => { var label = chart.data.labels[i]; var value = chart.data.datasets[0].data[i]; var x = xAxis.getPixelForValue(value) + 5; var y = yAxis.getPixelForTick(i); let percent = (value * 100 / sum).toFixed(2); ctx.fillText(label + ' (' + percent + '%)', x, y); }); ctx.restore(); } }], data: { labels: ['Traffic source 1', 'Traffic source 2', 'Traffic source 3', 'Traffic source 4'], datasets: [{ label: 'By Dataset', data: [15, 8, 12, 6], backgroundColor: ['red', 'lightblue', 'green', 'orange'], barPercentage: 1, categoryPercentage: 1 }] }, options: { layout: { padding: { right: 110 } }, legend: { display: false }, scales: { yAxes: [{ ticks: { display: false }, gridLines: { drawTicks: false } }], xAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: false } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart" height="80"></canvas>