javascript - 使用 chart.js jquery 在 chartdata.labels 上使用 html 标签

Question

我正在尝试在 chartjs 标签上显示 icomoon 图标，但我无法做到。如果我使用 html，它会将其作为常规文本返回。

https://jsfiddle.net/moviecrew/1sxhjzvo/6/这是我一直在研究的小提琴。我试过做这样的事情：

var socialMetLabel = ["<span class='icon-facebook'></span>", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""];

和图表选项喜欢这样：

data: {
        labels: socialMetLabel.slice(0, socialMetDisplayCount),
        // fontFamily: "'icomoon-font-tab', sans-serif",
        datasets: [{
            // label: false,
            data: socialMetData.slice(0, socialMetDisplayCount),
            backgroundColor: 'rgba(60, 143, 154, 0.16)',
            // backgroundColor: 'rgba(12, 125, 174, 0.2)',
            hoverBackgroundColor: 'rgba(60, 143, 154, 0.26)',
            borderWidth: 0,
            datalabels: {
                color: '#384354',
                font: {
                    family: '"Open Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
                    size: 18,
                    weight: 'bold'
                },
                // clamp: true,
                anchor: 'end',
                align: 'end',
                // fontSize: '18px',
                // fontWeight: 'bold',
            }
        }]
    },

    // Configuration options go here
    options: {

        responsive: true,
        maintainAspectRatio: false,

        legend: {
          // display: chkLegend,
          display: false,
        },

        title: {
          display: false,
          text: 'Total leads vs Referred vs Direct leads',
        },

        tooltips: {
            enabled: false,
        },

        scales: {
          xAxes: [{
            barPercentage: 0.8,
            categoryPercentage: 0.8,
            gridLines: {
                display: true,
                color: 'rgba(0,0,0,0.1)',
                drawBorder: false,
                zeroLineColor: 'rgba(0,0,0,0.1)'
            },
            ticks: {
                min: 0,
                max: 200,
                stepSize: 25,
                fontFamily: '"Open Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
                fontSize: 12,
                fontColor: '#AFB4BB',
                padding: 10
            },
            scaleLabel: {
                display: true,
                labelString: 'Number of views',
                fontFamily: '"Open Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
                fontSize: 12,
                // fontStyle: '300',
                fontColor: '#AFB4BB',
                padding: 10,
            }
          }],
          yAxes: [{
            categoryPercentage: 0.56,
            barPercentage: 1.0,
            gridLines: {
              display: false,
              color: 'rgba(0,0,0,0.1)',
              drawBorder: false,
            },
            ticks: {
                fontFamily: 'icomoon',
                fontSize: 20,
                fontColor: '#384354',
                padding: 25,
                // callback: function(value, index, values) {
                //     return  + value + '</em>';
                // }
            }
          }],
        },
    }

如果我使用这个角色，它工作得很好。它来自这里https://tppr.me/3iyib但是这样做，很难让它变得动态并且很难识别什么图标是什么。

那么有没有办法我们可以使用这 3 个<span class="icon-facebook"></span>或this中的任何一个来使其工作。"\e95d"这些都是你可以在我分享的截图中看到的。

标签： javascriptjquerychart.js