highcharts - Highchart - 使用 html 为标签自定义图像

Question

我有一个 highchart 条形图，并尝试在每个条形图中显示一些自定义图像作为标签。我通过像这样配置 plotOptions 来尝试它：

plotOptions: {
        column: {
            grouping: false,
            borderWidth: 0,
            groupPadding: 0,
            dataLabels: {
                enabled: true,
                useHtml: true,
                formatter: function () {
                    var score = '<img src="../Images/Icon_VPP_5Punkte" alt="5 Punkte" >';
                    if (this.color === "#e30613") score = '<img src="../Images/Icon_VPP_1Punkt" alt="1 Punkt">Test';
                    if (this.color === "#ed8c05") score = '<img src="../Images/Icon_VPP_3Punkte" alt="3 Punkte" >';
                    console.log(score);
                    return score;
                },
                inside: 'center',
                color: 'black',
                shadow: false,
                style: {
                    textOutline: "0px contrast"
                }
            }
        }

    }

如您所见，我将 useHtml 设置为“true”并设置了一些自定义格式化程序功能，例如在此处推荐： Highchart Doc

但不会显示任何图像。 JS小提琴

谁能帮我这个？

标签： highchartslabel

Answer 1

您的代码中有“useHtml”而不是“useHTML”；）

useHTML: true,

JS小提琴