Highchart上的图像

时间:2018-07-05 08:24:07

标签: javascript highcharts

我想将图像显示为图形上的标签。我尝试使用以下代码,但未显示图像。请帮忙。在此链接Highchart Image Code

中给出了代码

plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b><img src="{point.img}" style="width:100px; height: 100px;"></b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        },
        connectorColor: 'silver'
      }
    }
  },
  series: [{
    name: 'Share',
    data: [
      {name: 'Chrome', y: 61.41, 'img': 'https://image.flaticon.com/icons/svg/186/186236.svg'},
      {name: 'Internet Explorer', y: 11.84},
      {name: 'Firefox', y: 10.85},
      {name: 'Edge', y: 4.67},
      {name: 'Safari', y: 4.18},
      {name: 'Other', y: 7.05}
    ]
  }]

1 个答案:

答案 0 :(得分:0)

https://jsfiddle.net/Lzbjoa2w/17/

使用useHtml选项解决。

dataLabels: {
                enabled: true,
                useHTML: true,
                format: '<img src="{point.img}" style="width:50px; height: 50px;">',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                },
                connectorColor: 'silver'
            }