javascript - Highcharts tooltip image - Stack Overflow

admin管理员组

文章数量:1336631

I have a question.

I am using highchars in my project and i wanna know if it's possible to show an image (in this case i wanna show a google map static image) on the tooltip?

Thanks in advance

I have a question.

I am using highchars in my project and i wanna know if it's possible to show an image (in this case i wanna show a google map static image) on the tooltip?

Thanks in advance

• javascript
• highcharts

Share Improve this question Follow asked Dec 12, 2011 at 12:33 Miguel TeixeiraMiguel Teixeira 79311 gold badge1010 silver badges2929 bronze badges 2

• I think a question like this has already been asked here: stackoverflow./questions/7399051/…, and was answered by one of the developers at Highsoft. Also check out the api, which doesn't appear to make any provision for your request. highcharts./ref/#tooltip – mg1075 Commented Dec 12, 2011 at 23:28
• I can't answer my question, so i'll leave here my solution. In the tooltip i added useHtml: true. Then in the formatter i've make a function return some html beyond the ones that highcharts supports (in my case <img> tag) – Miguel Teixeira Commented Dec 15, 2011 at 17:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip.

Check out the 'formatter' option inside tooltip:

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        tooltip: {
            useHTML: true,
            headerFormat: '<small>{point.key}</small><table>',
            pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
            '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
            footerFormat: '</table>',
            formatter: function() {
                return '<img src="http://static.adzerk/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg" title="" alt="" border="0" height="250" width="220">';
            },
            valueDecimals: 2
        },

        series: [{
            name: 'Short',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: 'Long named series',
            data: [129.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4].reverse()
        }]

    });
});​

You can just insert the code of the static Google map image you were talking about.

Hope that helps.

本文标签： javascriptHighcharts tooltip imageStack Overflow