2011-08-25 39 views
14

Có ai biết cách tự động phóng to một phần của biểu đồ sau khi tải xong không? Tôi có rất nhiều dữ liệu về thời gian nhưng thông tin quan trọng nhất là ở bên phải. Tôi vẫn muốn tất cả dữ liệu có sẵn nhưng chỉ 7 ngày gần đây nhất trong chế độ xem được phóng to.Tự động phóng to trên vạch cao sau khi tải

Điều tôi muốn mô phỏng là kéo người dùng nhấp chuột trong 7 ngày mới nhất trên biểu đồ của tôi. Vì vậy, nếu có ai biết cách kích hoạt sự kiện đó theo cách thủ công, đó có thể là điều tôi muốn làm.

Dưới đây là một biểu đồ mẫu từ jsfiddle có chức năng zoom bình thường: http://jsfiddle.net/Y5q8H/50/

tôi có một vài ý tưởng khác về cách thức này có thể được thực hiện, nhưng tôi nghĩ rằng những gì tôi muốn là cách tốt nhất để đi về nó .

ý tưởng khác:

1) Chỉ nạp 7 ngày qua, đặt một giả 'Reset Phóng' nút mà sau đó tải loạt dữ liệu toàn bộ sau đó

2) Nhìn vào đó sản phẩm chị StockCharts đó là trong Beta ngay bây giờ. Nó dường như có một loạt các màn hình hiển thị phạm vi cài sẵn mà sẽ được mát mẻ để có quá. Tôi không chắc chắn bao nhiêu mã hiện tại của tôi tôi phải thay đổi mặc dù.

Trả lời

27

Bạn có thể sử dụng hàm setExtremes để thay đổi thu phóng. http://jsfiddle.net/quVda/382/

Đối với một biểu đồ chuỗi thời gian với ngày-by-ngày thông tin, bạn cần phải sử dụng các đại diện UTC kể từ ngày:

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

Tuyệt vời! Tôi thiết lập điều này để xảy ra trong trình xử lý sự kiện tải và nó hoạt động hoàn hảo. Cảm ơn :) – Robodude

+1

Vấn đề duy nhất là nó không làm cho nút Reset Zoom xuất hiện. Dù sao để sử dụng một mặc định như bạn sẽ có nếu bạn phóng to bình thường? – Robodude

+4

Cập nhật fiddle dựa trên nguồn highcharts. Bạn có thể thêm một mục vào thanh công cụ của biểu đồ: http://jsfiddle.net/quVda/1/ – Dennis

3

Cập nhật fiddle chính thức cho giải pháp, guys: 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

Có một tùy chọn khác nếu bạn thử

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; 
Các vấn đề liên quan