Как использовать изображение на этикетке в зависимости от данных?

Question

У меня есть полярная диаграмма, и я хочу использовать маленький значок на этикетке.Используемый значок зависит от данных.Поэтому я добавляю URL со значком в данные серии, но не могу взять его в xAxis.

xAxis: {
   labels: {
    formatter: function() {
        return '<image src='+this.point.icon+'/>';
  },
    useHTML: true
}
    },

yAxis: {
    max: 7,
    tickInterval : 1

},

 plotOptions: {
    column: {
        pointPadding: 0,
        groupPadding: 0
    },
    series: {
       stacking : "normal"
    }
},


series: [{
  name : 'Serie A',
  color : "#76DFE4",
  data : [
    {name : "Data 1", y : 3, icon : "https://via.placeholder.com/15" },
    {name : "Data 2", y : 3, icon : "https://via.placeholder.com/15" },
    {name : "Data 3", y : 2, icon : "https://via.placeholder.com/15" }
  ],


},{
  name: 'Serie B',
  color : "#37C0F7",
  data: [
{name : "Data 1", y : 1, icon : "https://via.placeholder.com/15" },
    {name : "Data 2", y : 2, icon : "https://via.placeholder.com/15" },
    {name : "Data 3", y : 3, icon : "https://via.placeholder.com/15" }

  ]

Пожалуйста, смотрите здесь JSFiddle: https://jsfiddle.net/gpn6mLah/9/

Спасибо

Answer 1

Вы можете ссылаться на свойство icon следующим образом:

xAxis: {
    labels: {
        formatter: function() {
            var point = this.chart.series[0].userOptions.data[this.pos];
            if (point) {
                return '<image src=' + point.icon + '/>';
            }
        },
        ...
    }
}

Демо: https://jsfiddle.net/BlackLabel/vdqk45no/