Add icon to legend text

问题:

This is my chart:

$('#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]          
    }]
});

And this is how it is displayed

What I'm willing to do is add an image in the left side of "Direção". I tried it like this:

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

But only the text is displayed. Is there any way to add an image to the title?

回答1:

With SVG, just insert the code point instead of all the <i class=\"fa fa-arrow-up\"> fanciness:

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

You can see the unicode maps here, drop the html escape code &#x and replace with javascripts \u.

For this to work do not set useHTML to true. You also have to set the font for your svg text elements to that of fontawesome font set:

svg text { font-family: FontAwesome; }

Fiddle here.

回答2:

You can use useHTML option to use html in a text. Otherwise only few html tags will be supported.

So, this should work,

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