如何使用 vue-chartjs 將圖像添加到圖表標簽？

Question

我想在國家代碼標簽下添加國旗圖標，但完全卡住了。

帶有我當前代碼的圖表圖像

這些圖像名為BR.svg, FR.svg and MX.svg ，位於@/assets/icons/flags/

我在我的項目中使用vue@2.6.12和vue-chartjs@3.5.1 。 這是我的Chart.vue 組件：

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  data: () => ({
    chartdata: {
      labels: ['BR', 'FR', 'MX'],
      datasets: [
        {
          label: 'Lorem ipsum',
          backgroundColor: '#AF78D2',
          data: [39, 30, 30],
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false,
      },
      tooltips: {
        "enabled": false
      },
      scales : {
        xAxes : [ {
            gridLines : {
                display : false
            }
        } ],
        yAxes: [{
          ticks: {
            beginAtZero: true,
            suggestedMin: 0,
            suggestedMax: 40,
            stepSize: 5,
          }
        }]
      },
      "hover": {
        "animationDuration": 0
      },
      "animation": {
        "duration": 1,
        "onComplete": function() {
          var chartInstance = this.chart,
          ctx = chartInstance.ctx;

          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function(dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function(bar, index) {
              var data = dataset.data[index] + '%';
              ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
          });
        }
      },
    }
  }),
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

下面的可運行代碼是我經過數小時的搜索得出的最接近解決方案的代碼。 但它仍然無法解決問題，因為我不知道如何將它與我所擁有的相結合。

 const labels = ['Red Vans', 'Blue Vans', 'Green Vans', 'Gray Vans']; const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png']; const values = [48, 56, 33, 44]; new Chart(document.getElementById("myChart"), { type: "bar", plugins: [{ afterDraw: chart => { var ctx = chart.chart.ctx; var xAxis = chart.scales['x-axis-0']; var yAxis = chart.scales['y-axis-0']; xAxis.ticks.forEach((value, index) => { var x = xAxis.getPixelForTick(index); var image = new Image(); image.src = images[index], ctx.drawImage(image, x - 12, yAxis.bottom + 10); }); } }], data: { labels: labels, datasets: [{ label: 'My Dataset', data: values, backgroundColor: ['red', 'blue', 'green', 'lightgray'] }] }, options: { responsive: true, legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [{ ticks: { padding: 30 } }], } } });

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

當我將插件代碼添加到我自己的代碼中時，我收到一條錯誤消息，提示“插件”已在道具中定義，但我無法設法以某種方式使用它。

誰知道如何在我的代碼中實現這個 afterDraw 插件？ 我感謝任何意見。

非常感謝：:)

Answer 1

在你的 vue 組件的掛載中，你可以像這樣調用 addPlugin （必須在 renderChart 方法之前完成）：

this.addPlugin({
  id: 'image-label',
  afterDraw: (chart) => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      xAxis.ticks.forEach((value, index) => {  
        var x = xAxis.getPixelForTick(index);      
        var image = new Image();
        image.src = images[index],
        ctx.drawImage(image, x - 12, yAxis.bottom + 10);
      });      
    }
})

文檔： https://vue-chartjs.org/api/#addplugin

Answer 2

它適用於 ChartJS 版本 4.0.1。 數據需要返回“插件”：

data() {
    return {
        plugins: [{
            afterDraw: chart => {
                    const ctx = chart.ctx;
                    const xAxis = chart.scales['x'];
                    const yAxis = chart.scales['y'];
                    xAxis.ticks.forEach((value, index) => {
                        let x = xAxis.getPixelForTick(index);
                        ctx.drawImage(images[index], x - 12, yAxis.bottom + 10)
                    });
                }
        }],
        data: {...

請注意 ctx 應該是 chart.ctx 而不是 chart.chart.ctx.. 同樣，它應該是 chart.scales['x'] 而不是 chart.scales['x-axis-0']。

返回插件后，需要像這樣在 Bar 組件中引用它。

<Bar :data="data" :options="options" :plugins="plugins"/>