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

时间:2016-01-06 04:30:08

标签: javascript css highcharts highcharts-ng

我是高手车的新手。我有一条消息说“标签”和所有类别的数字。我需要自定义单个图像或文本。我怎么能这样做?

我有这段代码:

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>'
}

1 个答案:

答案 0 :(得分: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>";

<强> Response failed