Highstocks에서 차트의 불규칙한 표시

Question

저는 실제로이 사실을 알 수 없습니다. 여러 업데이트를 사용하여 작업 할 때 마지막 애니메이션의 false로 설정해야한다고 이미 알고있는 사람이 있습니다. 하지만 어떻게 할 수 있는지 전혀 모르겠습니다. 또는 addPoints()을 사용할 때만 적용 할 수 있습니다. 여기 내 Fiddle 및 샘플 코드입니다.

$(function() { 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { 
     $('.zoom_controls a').click(function (e) { 
      e.preventDefault(); 
      // OK, pretty ugly :) 
      var call = 'zoom' + $(this).attr('data-range'); 
      // I have two globally accessible charts here: 
      if ($(this).attr('data-chart') == 'line') { 
       lineChart[call](); 
      } else { 
       candleChart[call](); 
      } 
      $(this).addClass('active'); 

     }); 
     var proto = Highcharts.Chart.prototype; 
     proto.zoomToD = function (delta) { 
      var chartMin = this.xAxis[1].min; 
      var chartMax = this.xAxis[0].max; 
      var min = chartMax - delta; 

      if (chartMin < min) { 
       // this.xAxis[0] is the view, this.xAxis[1] is the navigator 
       this.xAxis[0].setExtremes(min, chartMax); 
       this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax); 
       return true; 
      } 

      this.xAxis[0].setExtremes(chartMin, chartMax); 
      this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax); 
      return false; 
     }; 

     proto.zoom3m = function() { 
      return this.zoomToD(2592000 * 3 * 1000); 
     }; 
     proto.zoom6m = function() { 
      return this.zoomToD(2592000 * 6 * 1000); 
     }; 
     proto.zoom1y = function() { 
      return this.zoomToD(2592000 * 12 * 1000); 
     }; 
     proto.zoom2y = function() { 
      return this.zoomToD(2592000 * 24 * 1000); 
     }; 
     proto.zoom3y = function() { 
      return this.zoomToD(2592000 * 36 * 1000); 
     }; 
     proto.zoom5y = function() { 
      return this.zoomToD(2592000 * 60 * 1000); 
     }; 
     proto.zoom10y = function() { 
      return this.zoomToD(2592000 * 120 * 1000); 
     }; 
     proto.zoomYtd = function() { 
      var chartMin = this.xAxis[1].min; 
      var chartMax = this.xAxis[1].max; 
      var min = chartMax - 2592000 * 12 * 1000; 

      if (chartMin < min) { 
       this.xAxis[0].setExtremes(min, chartMax); 
       return true; 
      } 

      this.xAxis[0].setExtremes(chartMin, chartMax); 
      return false; 
     } 

     /*And then I define some stuff that instantiates Highcharts.StockChart objects, e.g.:*/ 
     var timestampTo = data[data.length - 1][0], 
      timestampFrom = timestampTo - 365 * 24 * 3600 * 1000; 
     lineChart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container', 
       type: 'area' 


      }, 

      series: [{ 
       id: "data", 
       name: 'HP', 
       data: data, 
       color: '#7BA6A5', 
      }], 
      tooltip: { 
       shared: true, 
       useHTML: true, 
       headerFormat: '<table>', 
       pointFormat: '<tr>' + 
        '<td style=\"color: #9c9e9c\"><b>日期:</b><span style="font-weight:bold;color:#7BA6A5">&nbsp;{point.x:%Y/%m/%d}</span></td></tr>' + 
        '<tr><td style=\"color: #9c9e9c\"><b>NAV 淨值:</b><span style="font-weight:bold;color:#7BA6A5">&nbsp;{point.y}</span></td></tr>', 
       footerFormat: '</table>', 
       valueDecimals: 2 
      }, 
      xAxis: { 
       min: timestampFrom, 
       max: timestampTo, 
       type: 'datetime', 
       dateTimeLabelFormats: { 
        year: '%Y', 
        month: '%m', 
        week: '%b %e' 
       }, 
       gridLineWidth: 1 

      }, 

      yAxis: { 
       opposite: false, 
       minorTickInterval: 'auto' 
      }, 
      rangeSelector: { 
       enabled: true, 
       inputPosition: { 
        align: "left" 
       } 

      }, 
      scrollbar: { 
       enabled: true 
      }, 
      navigator: { 
       enabled: true 
      } 
     }); 
     lineChart.yAxis[0].setExtremes(lineChart.series[0].dataMin, lineChart.series[0].dataMax); 
     lineChart.scroller.xAxis.labelGroup.hide(); 
     lineChart.scroller.xAxis.gridGroup.hide(); 
     lineChart.scroller.series.hide(); 
     lineChart.scroller.scrollbar.hide(); 
     lineChart.scroller.scrollbarGroup.hide(); 
     lineChart.scroller.navigatorGroup.hide(); 
     lineChart.scroller.scrollbarTrack.hide(); 
     $.each(lineChart.scroller.elementsToDestroy, function (i, elem) { 
      elem.hide(); 
     }); 
     lineChart.rangeSelector.zoomText.hide(); 
     $.each(lineChart.rangeSelector.buttons, function() { 
      this.hide(); 
     }); 
     /*lineChart.rangeSelector.inputEnabled = false;*/ 

    }); 
}); 

나는 YTD 버튼을 다시 한번 클릭해야만한다는 것을 잊어 버렸다.

Answer 1

setExtremes()도 추가했습니다. 내 YTD()이 올바른 방법은 아니지만 데이터가 이상하게 표시되는 것을 방지 할 수 있는지 확실하지 않습니다. Fiddle 업데이트 됨.