Highstock - 最小縮放

如何在Highstock中爲Navigator設置最小縮放（36個月）？我已經嘗試過，但它不起作用，你有一個想法嗎？Highstock - 最小縮放

$(function() { 

    var chart; 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { 
     // Create the chart 
     chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container' 
      }, 

      rangeSelector: { 
       selected: 1 
      }, 

      title: { 
       text: 'AAPL Stock Price' 
      }, 
      xAxis: { 
       minRange:6 * 30 * 24 * 3600 * 1000, 
       events: { 
        afterSetExtremes: function(e) { 
         var maxDistance = 10 * 30 * 24 * 3600 * 1000; //8 months time 
         var xaxis = this; 
         if ((e.max - e.min) < maxDistance) { 
          var min = e.max - maxDistance; 
          var max = e.max; 
          window.setTimeout(function() { 
           xaxis.setExtremes(min, max); 
          }, 1); 
         } 
        } 
       } 
      }, 
      series: [{ 
       name: 'AAPL', 
       data: data, 
       tooltip: { 
        valueDecimals: 2 
       }}] 
     }); 
    }); 

});

來源

2013-10-28 mal200

您需要配置buttons如果你想的範圍內選擇

xAxis: { 
    events: { 
     afterSetExtremes: function(e) { 
      var minDistance = 36 * 30 * 24 * 3600 * 1000; //36 months time 
      var xaxis = this; 
      if ((e.max - e.min) < minDistance) { 
       var min = e.max - minDistance; 
       var max = e.max; 
       window.setTimeout(function() { 
        xaxis.setExtremes(min, max); 
       }, 1); 
      } 
     } 
    } 
} 
rangeSelector: { 
    selected : 1, 
    buttons: [{ 
     type: 'month', 
     count: 36, 
     text: '36m' 
    }, { 
     type: 'month', 
     count: 42, 
     text: '42m' 
    }, { 
     type: 'month', 
     count: 48, 
     text: '48m' 
    }, { 
     type: 'month', 
     count: 54, 
     text: '54m' 
    }, { 
     type: 'all', 
     text: 'All' 
    }] 
}

工作的jsfiddle：http://jsfiddle.net/Zd5Cn/

來源

2013-10-28 09:41:20

它不起作用！你還有其他建議嗎？ – mal200

@ mal2009c我想我之前誤解了你的問題。檢查我更新的答案。 –

因爲1.3.6 minRange屬性不會再爲工作導航員。（在1.3.5中起作用）。我建議你禁用實時重繪以避免導航器的「跳躍」。

scrollbar: { 
     enabled: true, 
     liveRedraw: false 
    },

如果你不想禁用它，你必須調用xAxis.setExtremes兩次（它window.setTimeout之前添加到線）

 xAxis: { 
      type: 'datetime', 
      minRange: 36 * 30 * 24 * 3600 * 1000, 
      events: { 
       afterSetExtremes: function (e) { 
        var extremes, xAxis; 

        if (e.trigger === 'navigator') { 
         extremes = getDateExtremes(e.min, e.max, e.dataMax); 
         xAxis = this; 
         window.setTimeout(function() { 
          xAxis.setExtremes(extremes.min, extrems.max);        
         }, 1); 
        } 
       } 
      },

這裏是我們使用的輔助方法。

function padNumber(n) { 
    return n <= 9 ? '0' + n : n; 
} 


function getDateExtremes(begin, end, max) { 
    var minDistance = 36 * 30 * 24 * 3600 * 1000, 
     curMin, curMax, curMinDate, curMaxDate; 

    if ((end - begin) < minDistance) { 
     if ((begin + minDistance) <= max) { 
      curMin = begin; 
      curMax = begin + minDistance; 
     } else { 
      curMin = end - minDistance; 
      curMax = end; 
     } 
    } else { 
     curMin = begin; 
     curMax = end; 
    } 

    curMinDate = new Date(curMin); 
    curMaxDate = new Date(curMax); 

    return { 
     min: curMin, 
     max: curMax, 
     minDateId: curMinDate.getFullYear() + '-' + padNumber(curMinDate.getMonth() + 1) + '-' + padNumber(curMinDate.getDate()), 
     maxDateId: curMaxDate.getFullYear() + '-' + padNumber(curMaxDate.getMonth() + 1) + '-' + padNumber(curMaxDate.getDate()) 
    }; 
}

希望它可以幫助你。

來源

2013-10-31 09:22:21

Highstock - 最小縮放

回答

相關問題