将图标添加到图例文本

Question

这是我的图表：

$('#charsContentDiv').highcharts({
    chart: {
        zoomType: 'xy',
        height: 337
    },
    title: {
        text: ''
    },
    credits: {
        enabled: false
    }, 
    xAxis: [{
        categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
            'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
    }],
    yAxis: [{ // Primary yAxis
        min: 0,
        title: {
            text: 'Desempenho',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }
    }, 
    {   // Secondary yAxis
        title: {
            text: ''
        },
        labels: {
          enabled: false
        }
    }],
    tooltip: {
        shared: true
    },
    legend: {
        title: {
            text: '<i class=\"fa fa-arrow-up\"></i><span> Direção: '+direction+ '</span>'
        },
        layout: 'vertical',
        align: 'top',
        x: 60,
        verticalAlign: 'top',
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'Desempenho',
        type: 'column',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'Meta',
        type: 'line',
        data: [80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0, 80.0]          
    }]
});

这就是它的显示方式

我愿意做的是在“Direção”的左侧添加图像。我试过这样的话：

title: {
    text: '<img src=\"arrow.jpg\"></img> <span> Direção: '+direction+"</span>"
}

但只显示文字。有没有办法在标题中添加图像？

Answer 1

使用SVG，只需插入代码点而不是所有<i class=\"fa fa-arrow-up\">功能：

legend: {
    title: {
         text:'\uf062'+'Direção: '+direction
     },
}

您可以看到unicode地图here，删除html转义码&#x并替换为javascripts \u。

为此，不要将useHTML设置为true。您还必须将svg text元素的字体设置为fontawesome字体集的字体：

svg text {        font-family：FontAwesome;    }

小提琴here。

Answer 2

您可以使用useHTML选项在文本中使用html。否则只支持几个html标签。

所以，这应该有效，

legend: {
    useHTML: true,
    title: {
        text: '<img src=\"arrow.jpg\"></img> <span> Direção: '+direction+ '</span>'
    },
    layout: 'vertical',
    align: 'top',
    x: 60,
    verticalAlign: 'top',
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
}