在 Highcharts 中自定义图像和不同的文本

Question

我是 highcarts 的新手。我有一条消息说 "label" 和所有类别的数字。我需要自定义单个图像或文本。我该怎么做？

我有这个代码：

labels: {
  x: -5,
  y: -20,
  useHTML: true,
  format: '<div style="position: absolute; left: 40px"> my label </div> <img style="height: 30px; width: 30px; margin-top: 10px"  src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'
}

Answer 1

您可以通过以下方式给标签。

formatter: function () { return "<div style='position: absolute; left: 40px'>'"+ this.value + "'</div> <img style='height: 30px; width: 30px; margin-top: 10px'  src='https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png'></img>";

自定义图片如下：

var categoryImgs = {
            'number1':'http://i.stack.imgur.com/Tdw3H.png',
            'number2':'http://i.stack.imgur.com/Tdw3H.png',
            'number3':'http://i.stack.imgur.com/Tdw3H.png',
            'number4':'http://i.stack.imgur.com/Tdw3H.png',
            'number5':'http://i.stack.imgur.com/Tdw3H.png'
        };

formatter: function () { return "<div style='position: absolute; left: 40px'>'"+ this.value + "'</div> <img style='height: 30px; width: 30px; margin-top: 10px' src='"+categoryImgs[this.value]+"'></img>";

Working Fiddle

在 Highcharts 中自定义图像和不同的文本

customize images and different text in Highcharts

javascript

css

highcharts

highcharts-ng