2011-08-25 74 views
14

有誰知道如何在完成加載後自動放大圖表的一部分?我有很多時間序列數據,但最重要的信息是正確的。我仍然希望所有數據都可以使用,但只有最近7天才能放大。加載後自動放大高位圖

我想模擬的是用戶在我的圖表上最近7天內點擊拖動。所以如果有人知道如何手動觸發這個事件,那可能是我想要做的。

這裏是從的jsfiddle一個示例圖表具有正常的縮放功能:http://jsfiddle.net/Y5q8H/50/

我怎麼可以這樣做一些其他的想法,但我想我要的是去了解它的最佳方式。

其他的想法:

1)僅加載最後7天,放了假的「重置縮放」按鈕然後加載整個數據系列之後

2)考慮這樣做姊妹產品StockCharts這是在Beta現在。它似乎有一堆預設的範圍顯示,這也將是很酷的。我不知道我有多少現有代碼需要更改。

回答

27

您可以使用setExtremes函數更改縮放。 http://jsfiddle.net/quVda/382/

對於一天按天信息的時間序列圖,您需要使用日期的UTC表示:

var d = new Date(); 
chart.xAxis[0].setExtremes(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7), Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())); 
+0

太棒了!我將其設置爲在加載事件處理程序中發生,並且完美運行。謝謝:) – Robodude

+1

唯一的問題是它不會使重置縮放按鈕顯示。無論如何,如果你正常放大,使用默認的默認設置嗎? – Robodude

+4

根據highchart來源更新小提琴。您可以將一個項目添加到圖表工具欄中:http://jsfiddle.net/quVda/1/ – Dennis

3

更新瞭解決方案正式小提琴,夥計們: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setextremes/

$(function() { 
    $('#container').highcharts('StockChart', { 

     rangeSelector: { 
      selected: 1 
     }, 

     series: [{ 
      name: 'USD to EUR', 
      data: usdeur 
     }] 
    }); 

    $('#button').click(function() { 
     var chart = $('#container').highcharts(); 
     chart.xAxis[0].setExtremes(
      Date.UTC(2007, 0, 1), 
      Date.UTC(2007, 11, 31) 
     ); 
    }); 
}); 
0

如果您嘗試還有另一種選擇

var max_in = 100; //the highest y value you have in your series data; 
var min_in = 41 ;//the lowest y value you have in your series data; 

yaxis=this.yAxis[0]; 
yaxis.options.max = max_in; 
yaxis.options.min = min_in;