Highcharts - как это сделать пользовательские метки на Heatmap легенды

Question

Вот это jsfiddle моей диаграммы:

http://jsfiddle.net/b637gdxv/4/

chart: { 
     type: 'heatmap', 
     marginTop: 26, 
     marginLeft: 5, 
     marginRight: 5, 

     width: 200, 
     height: 250, 

     borderWidth: 3, 
     borderColor: 'grey', 
     borderRadius: 5, 
     plotBackgroundColor: '#FFFFFF', 
     plotShadow: true 
    }, 

В настоящее время я не могу понять, как добавить пользовательские метки на этой диаграмме. Мне не нужны метки «0-100», вместо этого я хочу иметь текст «Свободный» слева и «Полный» справа. Что мне нужно сделать, чтобы это сделать?

Answer 1

Вы можете настроить метки в конфигурации colorAxis.

colorAxis: { 
    min: 0, 
    max: 100, 
    stops: [ 
    [0, '#9DFF9D'], 
    [0.2, '#fffbbc'], 
    [0.7, '#fffbbc'], 
    [0.9, '#E6532E'] 
    ], 
    labels: { 
    step: 4, 
    enabled: true, 
    formatter: function() { 
     return this.value === 0 ? "Free" : "Full"; 
    } 
    } 
} 

Вот Обновленному скрипку http://jsfiddle.net/b637gdxv/5/

Обратите внимание, что я не совсем уверен, как Highcharts выясняет, сколько помечает colorAxis будет рисовать, но поднятие вашего примера 4 был правильный номер, чтобы получить его отображаются только первые и последние метки.

Также, только голова, функция форматирования установит 0 галочек на «Свободный» и все остальные на «Полные», но поскольку здесь вы показываете только 2 тика, это получается.

Highcharts на самом деле имеет довольно удивительный API с примерами скрипки для большинства опций конфигурации, так что вы можете проверить другие варианты этикеток и что-нибудь еще здесь:

http://api.highcharts.com/highmaps#colorAxis.labels