Как создать легенду для штриховых цветов в гистограмме Highcharts

Question

Я использую разные цвета для баров в гистограмме Highcharts для обозначения двух различных групп данных, как это (сокращенно):

$(function() { 
    $('#moduleDistribution').highcharts({ 
     colors: ['red', 'red', '#1aadce', '#1aadce'], 
     chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     plotOptions: { 
      series: { 
       colorByPoint: true 
      } 
     }, 
     series: [{ 
      showInLegend: false, 
      data: [ 
       ['node', 291], 
       ['wifi', 289], 
       ['timer', 289], 
       ['net', 285] 
      ] 
     }] 
    }); 
}); 

Demo: http://jsfiddle.net/7Luob5k8/4/

Как создать легенду (или подобное), чтобы объяснить значение цветов? Я хотел бы объяснить зрителям, почему некоторые бары красные, а некоторые нет.

Answer 1

Вы можете достичь этого, используя 2 серии. Сделайте их видимыми в легенде. Назначьте цвет, который вы хотите. укажите имена категорий в xAxis и используйте координатную систему [x, y] для отправки данных на диаграмму.

ваши категории

xAxis: { 
    categories: ['node', 'wifi', 'timer', 'net', 'gpio', 'file', 'uart', 'i2c', 'mqtt', 'adc', '1wire', 'bit', 'pwm', 'spi', 'u8g', 'cjson', 'ws2812', 'coap'] 
}, 

ваша серия будет выглядеть следующим образом.

 series: [{ 
      data: [ 
      [0, 291], 
      [1, 289], 
      [2, 289], 
      [3, 285], 
      [4, 284], 
      [5, 283], 
      [6, 263] 
     ], 
     color: '#FF0000' 
    }, { 

     data: [ 
      [7, 135], 
      [8, 119], 
      [9, 100], 
      [10, 96], 
      [11, 89], 
      [12, 80], 
      [13, 65], 
      [14, 60], 
      [15, 57], 
      [16, 46], 
      [17, 20] 
     ], 
     color: '#1aadce' 
    }] 

Here Я обновил свой скрипку