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

Question

我是新来的highcarts主题。我有一条消息，上面写着“标签”和所有类别的数字。我需要自定义单个图像或文本。我怎样才能做到这一点？

我有这个代码：

http://jsfiddle.net/u3o416xb/

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>";

工作小提琴