drillup後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列動畫設置爲false來解決：

plotOptions: { column: { animation:false } }