Расстояние между строками и высотой между полосками в гистограмме Highcharts.js

Question

Я пытаюсь понять, как контролировать верхнее/нижнее расстояние, высоту и положение баров из моей диаграммы. Мне нужно выровнять все столбцы, чтобы начать с в верхнем левом углу, затем установите высоту по 30 пикселей каждый, затем 2 поля вверх/вниз для каждого бара, после того, как вы нажмете на любой из этих баров, размещение будет одинаковым для всех, если высота всех баров больше, чем оригинальная высота контейнера ... затем измените размер диаграммы, чтобы разместить обновленный график? Я знаю, что звучит сложно, есть ли у кого-нибудь подобное?

Я создал drilldown highchart.js

Это пример того, как макет должен выглядеть следующим образом:

Это мои ЯШ:

$(function() { 
      $('#container').highcharts({ 
       chart: 
       { 
        type: 'bar', 
        backgroundColor: 'red', 
        spacingTop: 20, 
        spacingBottom: 20, 
        height: 400 
       }, 
       title: { 
        text: null 
       }, 
       subtitle: {}, 
       xAxis: { 
        type: 'category', 
        labels: { 
         style: { 
          fontSize: '14px', 
          textAlign: 'right', 
          paddingTop: '10px', 
          paddingRight: '10px', 
          paddingBottom: '10px', 
          //background: '#fff', 
         }, 
         useHTML : true 
        } 
       }, 
       yAxis: { 
        labels: { 
         align: 'center' 
        }, 
        title: { 
         text: null 
        } 

       }, 
       legend: { 
        enabled: false 
       }, 
       plotOptions: { 
        series: { 
         color: '#d0d1d1', 
         borderWidth: 2, 
         borderColor: "#fff", 
         pointPadding: 0, 
         groupPadding: 0,   }, 
       }, 

       tooltip: 
       { 
        enabled: false 
       }, 
       credits: 
       { 
        enabled: false 
       }, 
       series: [{ 
        data: [{ 
         name: "Asia", 
         y: 56.33, 
         drilldown: "Microsoft Internet Explorer" 
        }, { 
         name: "North America", 
         y: 24.03, 
         drilldown: "Chrome" 
        }, { 
         name: "South America", 
         y: 10.38, 
         drilldown: "Firefox" 
        }, { 
         name: "Europe", 
         y: 4.77, 
         drilldown: "Safari" 
        }, { 
         name: "Australia", 
         y: 0.91, 
         drilldown: "Opera" 
        }, { 
         name: "Africa", 
         y: 32.33, 
         drilldown: "Opera" 
        }] 
       }], 
       drilldown: { 
        series: [{ 
         id: "Microsoft Internet Explorer", 
         data: [ 
          [ 
           "v11.0", 
           24.13, 
          ], 
          [ 
           "v8.0", 
           17.2 
          ], 
          [ 
           "v9.0", 
           8.11 
          ], 
          [ 
           "v10.0", 
           5.33 
          ], 
          [ 
           "v6.0", 
           1.06 
          ], 
          [ 
           "v7.0", 
           0.5 
          ] 
         ] 
        }, { 
         name: "Chrome", 
         id: "Chrome", 
         data: [ 
          [ 
           "v40.0", 
           5 
          ], 
          [ 
           "v41.0", 
           4.32 
          ], 
          [ 
           "v42.0", 
           3.68 
          ], 
          [ 
           "v39.0", 
           2.96 
          ], 
          [ 
           "v36.0", 
           2.53 
          ], 
          [ 
           "v43.0", 
           1.45 
          ], 
          [ 
           "v31.0", 
           1.24 
          ], 
          [ 
           "v35.0", 
           0.85 
          ], 
          [ 
           "v38.0", 
           0.6 
          ], 
          [ 
           "v32.0", 
           0.55 
          ], 
          [ 
           "v37.0", 
           0.38 
          ], 
          [ 
           "v33.0", 
           0.19 
          ], 
          [ 
           "v34.0", 
           0.14 
          ], 
          [ 
           "v30.0", 
           0.14 
          ] 
         ] 
        }, { 
         name: "Firefox", 
         id: "Firefox", 
         data: [ 
          [ 
           "v35", 
           2.76 
          ], 
          [ 
           "v36", 
           2.32 
          ], 
          [ 
           "v37", 
           2.31 
          ], 
          [ 
           "v34", 
           1.27 
          ], 
          [ 
           "v38", 
           1.02 
          ], 
          [ 
           "v31", 
           0.33 
          ], 
          [ 
           "v33", 
           0.22 
          ], 
          [ 
           "v32", 
           0.15 
          ] 
         ] 
        }, { 
         name: "Safari", 
         id: "Safari", 
         data: [ 
          [ 
           "v8.0", 
           2.56 
          ], 
          [ 
           "v7.1", 
           0.77 
          ], 
          [ 
           "v5.1", 
           0.42 
          ], 
          [ 
           "v5.0", 
           0.3 
          ], 
          [ 
           "v6.1", 
           0.29 
          ], 
          [ 
           "v7.0", 
           0.26 
          ], 
          [ 
           "v6.2", 
           0.17 
          ] 
         ] 
        }, { 
         name: "Opera", 
         id: "Opera", 
         data: [ 
          [ 
           "v12.x", 
           0.34 
          ], 
          [ 
           "v28", 
           0.24 
          ], 
          [ 
           "v27", 
           0.17 
          ], 
          [ 
           "v29", 
           0.16 
          ] 
         ] 
        }] 
       } 
      }); 
      }); 

Answer 1

Использование drilldown и drillup событий, чтобы установить новую высоту для ось, которая будет использовать пространство вы хотите: http://jsfiddle.net/oe236652/4/

 events: { 
      drilldown: function (e) { 
       this.xAxis[0].update({ 
        height: 34 * e.seriesOptions.data.length 
       }, false); 
      }, 
      drillup: function (e) { 
       this.xAxis[0].update({ 
        height: 34 * e.seriesOptions.data.length 
       }, false); 
      } 
     } 

Дополнительно установлен xAxis.height при создании диаграммы и series.pointWidth:

xAxis: { 
     height: 34 * 6, // (30 + 2*2) * number_of_points 
     ... 
    }, 

    plotOptions: { 
     series: { 
      pointWidth: 30, 
      ... 
     }, 
    }, 

Примечание: Я хотел бы предложить, чтобы установить высоту для диаграммы, которая будет достаточно для отображения всех баров (нажмите «Северная Америка»), или в drillup/drilldown установите новый размер для диаграммы, используя setSize(w, h).