如何用vue-chartjs给图表标签添加图片？

aiqt4smr 于 2022-12-18 发布在 Chart.js

关注(0)|答案(2)|浏览(163)

我想在国家代码标签下添加国旗图标，但完全卡住了。
Image of the chart with my current code
这些图像名为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>

下面这段可运行的代码是我花了几个小时寻找到的最接近解决方案的代码，但它仍然不能解决问题，因为我不知道如何将它与我现有的代码集成在一起。
x一个一个一个一个x一个一个二个x
当我把插件代码添加到我自己的代码中时，我收到一条错误消息，说“插件”已经在 prop 中定义了，但我不知何故无法使用它。
任何人谁知道如何实现这个afterDraw插件到我的代码？我感谢任何输入。
提前感谢！：）

chart.js

来源：https://stackoverflow.com/questions/66263008/how-to-add-images-to-chart-labels-with-vue-chartjs

2条答案

按热度按时间

4smxwvx51#

在挂载的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

赞(0）回复(0）举报 2022-12-18

km0tfn4u2#

它在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"/>

赞(0）回复(0）举报 2022-12-18

我来回答

如何用vue-chartjs给图表标签添加图片？

2条答案

相关问题

热门标签

最新问答