有没有可能显示图标在年底的酒吧一样,在下面的图片与图表。我找了一点,但没有找到任何关于这方面的东西。
pbossiut1#
Simonbrunel给出了一个解决方案:link和小提琴https://jsfiddle.net/simonbrunel/y1ry2cvb/。如果你想在图表中使用图标,你必须给予一个fontFamily,在我的情况下,我使用的图标从FontAwesome
options: { scales: { xAxes: { ticks: { fontFamily: 'FontAwesome', } } } }
之后,我使用unicod:- ----------
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>
2条答案
按热度按时间pbossiut1#
Simonbrunel给出了一个解决方案:link和小提琴https://jsfiddle.net/simonbrunel/y1ry2cvb/。
如果你想在图表中使用图标,你必须给予一个fontFamily,在我的情况下,我使用的图标从FontAwesome
之后,我使用unicod:- ----------
jm2pwxwz2#
你可以试试这个。但它并不总是显示图标,只有当鼠标悬停在栏上。