Несколько изображений для Highcharts X Axis Labels

Question

Я хочу иметь возможность отображать список различных изображений на диаграмме высокой паутины. До сих пор мне удавалось иметь возможность отображать одно единственное изображение несколько раз JS Fiddle с тем, куда я попал.

labels: {
  formatter: function() {       
        return '<img src="' + img_path + '" style="width:45px;height:45px;" />';
    },
    useHTML: true,
    align: 'center'
}

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

Answer 1

Самый простой способ добиться этого - установить xAxis.type в категорию и предоставить данные, которые включают ключ 'name', где имя является выходом функции, которая возвращает элемент HTML span.

Демонстрация: https://jsfiddle.net/BlackLabel/pmckLwh1/

Функция для возврата элемента HTML span:

var dataName = function(imgSrc) {
  return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};

Формат данных:

var data2016 = [
  [17, dataName("https://image.flaticon.com/icons/svg/197/197571.svg")],
  [19, dataName("https://image.flaticon.com/icons/svg/197/197408.svg")],
  [26, dataName("https://image.flaticon.com/icons/svg/197/197375.svg")],
  [27, dataName("https://image.flaticon.com/icons/svg/197/197374.svg")],
  [46, dataName("https://image.flaticon.com/icons/svg/197/197484.svg")],
];

---

API: https://api.highcharts.com/highcharts/series.column.keys

API: https://api.highcharts.com/highcharts/xAxis.type