Настройка Stacked гистограмма в highChart

Question

Я пытаюсь настроить сложена гистограмму, как этого

Здесь я сделал все остальные вещи, но я не знаю, как дать, что штриховые линии над каждой колонкой ........ мне нужно что-бар линия в положительных и отрицательных осях

Моего код

$(document).ready(function() { 
    $('#div1').highcharts({ 
     chart: { type: 'column', backgroundColor: 'transparent' }, 
     title: { text: null }, 
     subtitle: { text: null }, 
     credits: { 
      enabled: false 
     }, 
        xAxis: { 
      categories: categories, 
      labels: { 
       rotation: 0, 
       style: { 
        fontWeight: 'normal', 
        fontSize: '0.9vw', 
        fontFamily: 'Verdana, sans-serif', 
        color: "black" 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       enabled: false 
      }, 
      lineWidth: 0, 
      gridLineWidth: 1, 
      labels: { 
       enabled: true 
      }, 
      // gridLineColor: 'transparent', 
      plotLines: [{ 
       color: '#ddd', 
       width: 1, 
       value: 0 
      }], 

     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 
     series:seriesforSeniorUPT 
    }); 
}); 

}); 

Ссылка Fiddle

Answer 1

Выработать на полезном комментарии Sebastian Bochan, вот это обновленная версия вашей скрипки с двумя рядами «фиктивных», чтобы служить в качестве узорного фона: https://jsfiddle.net/brightmatrix/hc8rLy18/2/

Несколько пунктов, чтобы отметить:

• Есть две серии «фиктивных»: одна для положительных чисел и одна для отрицательных чисел.
• Обе серии имеют и enableMouseTracking для false, поэтому пользователь не может взаимодействовать с ними.
• Обе серии имеют stacking для false, поэтому они не будут частью «реальных» данных, которые вы хотите показать.
• Обе серии имеют zIndex для 0. Я объясню, почему ниже кодовый блок.

Код для серии «манекен» заключается в следующем.

// background for positive values 
obj = {}; 
obj["name"] = 'patternFill'; 
obj["data"] = [120, 120]; 
obj["color"] = 'url(#highcharts-default-pattern-3)'; 
obj["grouping"] = false; 
obj["zIndex"] = 0; 
obj["enableMouseTracking"] = false; 
obj["stacking"] = false; 
obj["showInLegend"] = false; 
seriesforSeniorUPT.push(obj); 

// background for negative values 
obj = {}; 
obj["name"] = 'patternFill'; 
obj["data"] = [-80, -80]; 
obj["color"] = 'url(#highcharts-default-pattern-3)'; 
obj["grouping"] = false; 
obj["zIndex"] = 0; 
obj["enableMouseTracking"] = false; 
obj["stacking"] = false; 
obj["showInLegend"] = false; 
seriesforSeniorUPT.push(obj); 

Для три «реальных» серий данных, я поставил zIndex в 10, чтобы они будут появляться над серией «фиктивной», который мы используем для нашего patterend фонов.

Для всех серий я установил grouping в false, чтобы они отображались один поверх другого, а не рядом друг с другом.

Вот скриншот выхода. Надеюсь, это полезно!