Chart.js在栏顶部添加图标

pftdvrlh  于 2022-11-23  发布在  Chart.js
关注(0)|答案(2)|浏览(175)

有没有可能显示图标在年底的酒吧一样,在下面的图片与图表。
我找了一点,但没有找到任何关于这方面的东西。

pbossiut

pbossiut1#

Simonbrunel给出了一个解决方案:link和小提琴https://jsfiddle.net/simonbrunel/y1ry2cvb/
如果你想在图表中使用图标,你必须给予一个fontFamily,在我的情况下,我使用的图标从FontAwesome

options: {
  scales: {
    xAxes: {
      ticks: { 
        fontFamily: 'FontAwesome',
      }
    }
  }
}

之后,我使用unicod:- ----------

jm2pwxwz

jm2pwxwz2#

你可以试试这个。但它并不总是显示图标,只有当鼠标悬停在栏上。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" width="10" height="6"></canvas>
<script>
    new Chart(document.getElementById('myChart'), {
      type: 'bar',
      data: {
        labels: ['A', 'B',],
        datasets: [{
          label: 'My Dataset',
        data: [76],
          fill: false,
          backgroundColor: ['rgba(255, 99, 132, 0.2)'],
          borderColor: ['rgb(255, 99, 132)'],
          borderWidth: 1
        }]
      },
      options: {
        tooltipTemplate: "<%= value %>",
        showTooltips: true,
        onAnimationComplete: function() {
          this.showTooltip(this.datasets[0].points, true);
        },
      tooltipEvents: [],
        plugins: {
          labels: {
            render: 'image',
            textMargin: 10,
            images: [
              {
                src: 'https://i.stack.imgur.com/9EMtU.png',
                width: 20,
                height: 20
              },
              null, 
            ]
          }
        },
      }
    });
</script>

相关问题