Горизонтальная гистограмма с контуром за баром

Question

Мы хотели бы отобразить следующую диаграмму, используя Highcharts. У нас есть большая часть этого, кроме темно-серого фона за каждым баром. Нам нужно, чтобы они всегда покрывали всю ширину диаграммы.

Мы не хотим добавлять новую серию, потому что серый фон не представляет никаких данных в нашем приложении, это чисто эстетический выбор. Это похоже на взлом, чтобы добавить ряд данных для просмотра. & чувствую потребность. Кроме того, теперь мы должны сами управлять максимумом оси, вместо того, чтобы позволить HighCharts просто понять это для нас.

Можно ли это сделать в HighCharts или мы придерживаемся подхода новой серии?

У меня нет нашего кода в состоянии, в котором я могу просто вытащить его, но давайте начнем с этого примера на основе HighCharts: http://jsfiddle.net/92SFh/. Я уверен, что смогу приспособить любую технику, которую мы здесь используем.

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Population (millions)', 
       align: 'high' 
      }, 
      labels: { 
       overflow: 'justify' 
      } 
     }, 
     tooltip: { 
      valueSuffix: ' millions' 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 

     series: [{ 
      name: 'Year 2008', 
      data: [973, 914, 4054, 732, 34] 
     }] 
    }); 
}); 

Answer 1

Существует другое решение, чем использование серии , В самом деле есть три варианта, ни один из них не легко, так:

• использование plotBands - будет работать только с фиксированным количеством баров и фиксированной высотой диаграммы: http://jsfiddle.net/92SFh/4/
• использования визуализатора рисовать фон rects, см. docs - но вам нужно вручную найти все значения x/y/width/height, чтобы нарисовать такой прямоугольник.
• обертка для рисования точек рисовать не только бар, но серая форма также, демо: http://jsfiddle.net/92SFh/6/

Я думаю, что третий вариант является лучшим для вас, но требует больше знаний о ядре Highcharts, чем любой из других.

И относительно min/max для yAxis - вам не нужно ничего рассчитывать. Просто создайте второй yAxis, который не будет подключен к первому, установите maxPadding: 0 и свяжите эту фиктивную серию со вторым yAxis. Все значения в этой серии для второго yAxis могут быть любыми (но должны быть одинаковыми!).

Answer 2

http://jsfiddle.net/92SFh/2/

Это вы должны получить очень близко. Он использует плагины с закругленными углами высоких карт и негруппирует серию так, чтобы они перекрывались. Вы можете изменить его по своему вкусу.

Чтобы получить закругленные углы, используя плагин, добавьте в серии:

borderRadiusTopLeft: 8, 
borderRadiusTopRight: 8 

И чтобы они не пересекались ...

 plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       }, 
       grouping: false 
      } 
     },