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 - 最小缩放

回答

相关问题