2012-06-19 34 views
19

Tôi đã thấy mã này: http://jsfiddle.net/AVygG/khi nào là một highchart được tải hoàn toàn?

Tôi tò mò khi nào là điểm mà highchart được tải hoàn toàn? Tôi thấy trong tài liệu highcharts rằng sự kiện : tải: nên làm phép thuật có thể gọi hàm gọi lại khi highchart được tải hoàn toàn.

Nếu nó đã được tải hoàn toàn, thì tôi có thể giả định rằng biểu đồ var đã có giá trị khi cảnh báo bật lên không? Đó có phải là cơ sở tốt mà biểu đồ đã được tải không?

Lý do tôi hỏi là tôi đang làm việc trên một mã khác mà highchart dường như không được tải hoàn toàn trong IE8. Hình như highcharts có khả năng có điều kiện chạy đua khi tải các phần tử của nó.

Cảm ơn!

$(function() { 
// create the chart 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       alert ('Chart loaded'); 
      } 
     }   
    }, 
    xAxis: { 
    }, 

    series: [{ 
     animation: false, 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]  
    }] 
}); 

});

+1

Bạn có thể chứng minh sự cố bạn đang gặp phải trong jsfiddle không? – jasonlfunk

Trả lời

6

Hãy thử sự kiện redraw. Sự kiện này được kích hoạt sau khi tải, nhưng sau khi chuỗi đã được thêm và thay đổi kích thước biểu đồ.

$(function() { 
    // create the chart 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      events: { 
       redraw: function(event) { 
        alert ('Chart loaded'); 
       } 
      }   
     }, 
     series: [{ 
      animation: false, 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]  
     }] 
    }); 
}); 

vẽ lại sự kiện từ Highcharts chính thức tham khảo: http://api.highcharts.com/highcharts#chart.events.redraw

Và demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/

6

Trong chức năng tải gọi lại, bạn có thể truy cập vào đối tượng biểu đồ bằng cách sử dụng "này" con trỏ.

 events: { 
      load: function(event) { 
       alert ('Chart loaded with series :'+ this.series[0].name); 
       console.log(this); 
      } 
     }   

JsFiddle: http://jsfiddle.net/msjaiswal/AVygG/25/

+1

thế nào về điều này? http://jsfiddle.net/AVygG/97/ Chức năng gọi lại kích hoạt sớm hơn dự kiến. –

16

Highcharts có chức năng gọi lại

var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      events: { 
       redraw: function(event) { 
        alert ('Chart loaded'); 
       } 
      }   
     }, 
     series: [{ 
      animation: false, 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]  
     }] 
    },function(chart){ 

alert('LOADED'); 

}); 
+0

có điều gì đó giống như trên hoạt ảnh bắt đầu không? – ivkremer

2

này đã được trả lời, nhưng không dứt khoát đủ. tài liệu Highcharts nói một cách rõ ràng

... Trong hầu hết các trường hợp biểu đồ được xây dựng trong một thread, nhưng trong Internet Explorer phiên bản 8 hoặc ít bảng xếp hạng đôi khi được bắt đầu trước khi các tài liệu đã sẵn sàng, và trong những trường hợp này đối tượng biểu đồ sẽ không được hoàn tất trực tiếp sau khi gọi new Highcharts.Chart(). Theo kết quả , mã dựa trên đối tượng Biểu đồ mới được xây dựng nên luôn chạy trong gọi lại.

Vì vậy, đối phó với các đối tượng biểu đồ trong IE8 phải được thực hiện trong gọi lại, ví dụ: new Highcharts.Chart(options, function(chart) { ... }). Bạn cũng có thể sử dụng function() { ... } và sử dụng this trong hàm.

Liên quan đến mối quan ngại cụ thể của bạn về thông báo tải. Tôi đã phải làm điều đó trong gọi lại, nhưng nó hoạt động.

chart1 = new Highcharts.Chart(options, function(){ 
    this.showLoading(); 
}); 
Các vấn đề liên quan