新增图标传说文本(Add icon to legend text)

这是我的图表：

$('#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 这里 ，删除HTML转义码&#x ，代之以JavaScript的\u 。

对于这个工作没有设置useHTML为true。 您还可以设置字体为SVG text元素到fontawesome字体集：

SVG的文本{FONT-FAMILY：FontAwesome; } }

小提琴这里 。

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'
}

文章来源: Add icon to legend text