Highcharts工具提示图像 [英] Highcharts tooltip image

问题描述

我有一个问题。

我在项目中使用highchars，我想知道是否可以显示图像（在这种情况下，我想显示一个谷歌如何在静态图片上显示图片？

提前致谢

解决方案

您可以使用HTML来呈现工具提示的内容而不是SVG。使用HTML可以在工具提示中使用高级格式化的表格和图像。

查看工具提示中的'formatter'选项：

  $（function（）{
 var chart = new Highcharts.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.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpgtitle =alt =border =0height =250width = 220 >'; 
}，
 valueDecimals：2 
}，
 
系列：[{
 name：'Short'，
 data：[29.9， 
}，{
名称：'长名系列'，
数据：[129.9， （$）
}] 
 
}）; 
}）; 
  

您可以将静态Google地图图像的代码插入正在谈论。

希望有帮助。

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

解决方案

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.net/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.

这篇关于Highcharts工具提示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！