Ярлыки Highcharts половину отсутствуют после развертки

Question

Я загружаю гистограмму с динамическими данными. При нажатии любой панели он сверлит до линейной диаграммы, сделанной из динамических данных. Проблема в том, что когда я нажимаю кнопку «Назад», бары отображаются неправильно. Они разрезают пополам, как показано в image. Но когда график прокручивается немного, все бары выглядят красиво. charts image показывает четыре диаграммы в пошаговом порядке.

1. Когда я нажимаю на панель, она сверлит до линейной диаграммы.
2. При нажатии кнопки «Назад» отображается гистограмма с неполными барами.
3. При прокрутке маленькие полосы отображаются правильно.

Ниже приведен пример кода:

Highcharts.chart(div_id, { 
    chart: { 
     type: type, 
     height: height, 
     width: 800, 
     inverted:true, 
     events: { 
      drilldown: function (e) { 
       if (drill=="yes"){ 
        if (!e.seriesOptions) { 
         var chart = this; 
         chart.inverted = false; 
         chart.showLoading('Loading ...'); 
         var node=e.point.name.toLowerCase(); 
         drill_ajax(x,y,z).done(function(r){ 
          temp=r["dropdowns"]; 
          dropdownlines=r["drilldownsLines"]; 
          selected_valforpatdata=e.point.name.toLowerCase(); 
          var seriesLine = dropdownlines[e.point.name]; 
          var max_len=seriesLine.data.length; 
          var points = [] 
           seriesLine.data.forEach(function (theData) { 
            points.push(theData[1]); 
           }); 
          chart.legend.update({enabled:true}); 
          chart.xAxis[0].update({max:(max_len > 7) ? 7 : max_len-1}); 
          chart.yAxis[0].update({ 
           max: Math.max.apply(Math, points) 
          }); 
          chart.addSingleSeriesAsDrilldown(e.point, seriesLine); 
          chart.applyDrilldown(); 
          chart.hideLoading(); 
         }); 

        } 
       } 
      }, 
      drillup: function(e,x){ 
       var chart = this; 
       chart.inverted = true; 
       chart.legend.update({enabled:false}); 
       chart.xAxis[0].update({max:(data['category'].length > 7) ? 7 : (data['category'].length - 1)}); 
       var points = [] 
       this.series.forEach(function (entry) { 
        entry.data.forEach(function (theData) { 
         points.push(theData.y); 
        }); 
       }); 
       this.yAxis[0].update({ 
        max: Math.max.apply(Math, points) 
       }); 
      }, 
      load: function() { 
       var points = [] 
       this.series.forEach(function (entry) { 
        entry.data.forEach(function (theData) { 
         points.push(theData.y); 
        }); 
       }); 
       this.yAxis[0].update({ 
        max: Math.max.apply(Math, points) 
       }); 
      } 
     } 
    }, 
    title: { 
     text: '' 
    }, 
    xAxis: { 
     type: "category", 
     allowDecimals: false, 
     scrollbar: { 
      enabled: true, 
     }, 
     labels:{ 
      formatter: function() { 
       var text = this.value, 
       formatted = text.length > 20 ? text.substring(0, 20) + '...' : text; 
       return '<div class="js-ellipse" title="' + text + '">' + formatted + '</div>'; 
      }, 
     }, 
     max:(data['category'].length > 7) ? 7 : (data['category'].length - 1), 
     min:0 
    }, 
    yAxis: { 
     allowDecimals: false, 
     min: 0, 
     title: { 
      text: y_text 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }], 
    }, 
    tooltip: { 
     footerFormat: '', 
     shared: true, 
     useHTML: true, 
     backgroundColor: 'rgba(247,247,247,1)', 
    }, 
    legend:{ 
     enabled:false 
    }, 
    credits:{ 
     enabled:false 
    }, 
    plotOptions: { 
     color: "#53c68c", 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0 
     }, 
     series: { 
      name:titleCase(chart_for), 
      stacking: 'normal', 
      pointWidth: 20, 
      color: barColor, 
     }, 
    }, 
    series: [{ 
     title: title, 
     data: data['data'] 
    }], 

    drilldown: { 
     series: [] 
    } 
}); 

Answer 1

Проблема может быть решена путем установки столбца анимации ложным под plotOptions:

plotOptions: { column: { animation:false } }