Highcharts jQuery render vấn đề - tất cả các trình duyệt

Question

Tôi có một vấn đề xa lạ trong khi cố gắng xây dựng một biểu đồ cột chồng sử dụng Highcharts

Khi biểu đồ này hiển thị, các cột không hiển thị, cho đến khi, bạn thay đổi kích thước trình duyệt trong dù sao, làm cho biểu đồ vẽ lại. (Tôi nghĩ)! Phần còn lại của biểu đồ hiển thị (trục, tiêu đề, v.v.) nhưng không hiển thị chính các cột.

Tôi nhận được cùng một hành vi trong IE, Firefox và chrome.

Tôi đã đặt mã trên jsfiddle - http://jsfiddle.net/gd7bB/173/ Tải lên và bạn sẽ không thấy dữ liệu, thay đổi kích thước cửa sổ trình duyệt và "tada", dữ liệu xuất hiện (thay vì các cột xuất hiện)!

Bất kỳ trợ giúp nào về vấn đề này sẽ được đánh giá ồ ạt.

Answer 1

Remove dòng chart.render();

Khi HighCharts constructor được gọi là không cần phải gọi render ngầm.

Answer 2

Tôi có chính xác cùng một vấn đề - Highcharts JS v2.1.5 (2011/06/22) không làm việc với jQuery 1.7.1

Sau khi thay đổi để jQuery 1.6.1 (Phiên bản ổn định cuối cùng tôi được sử dụng) nó đã làm việc. Ai đó nên kiểm tra các phiên bản khác của jQuery.

Answer 3

Tôi gặp sự cố tương tự - sau khi tải trang, biểu đồ không hiển thị các dòng (chỉ tiêu đề và chú giải). Sau khi bất kỳ thay đổi kích thước trình duyệt hoặc cũng phóng to biểu đồ đột nhiên xuất hiện.

Vấn đề là với jQuery> 1.7 (phiên bản của tôi bây giờ là 1.8.2) Cập nhật Highcharts lên phiên bản mới nhất (v2.3.3 (2012-10-04)) đã khắc phục sự cố (và các vấn đề nhỏ khác)

Answer 4

Bạn không cần thay đổi bất kỳ phiên bản Highcharts hoặc Jquery nào, nếu bạn resize() vùng chứa div ở cuối tập lệnh của mình.

Ví dụ:

$('#div').resize(); 

Answer 5

lẽ muộn một chút, nhưng tôi đã có cùng một vấn đề với jQuery 1.9.1 và không muốn hạ xuống nó cho Highcharts với dotnet.highcharts.

nếu bạn crate một Highchart mới có ví dụ:

.InitChart(new Chart 
{ 
    DefaultSeriesType = ChartTypes.Line, 
    MarginRight = 130, 
    MarginBottom = 25, 
    ClassName = "chart", 
    Events = new ChartEvents { Load = "function(event) { $(document).resize(); }" } 
    }) ..... 

Bạn cũng có thể sử dụng nó

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       //When is chart ready? 
       $(document).resize(); 
      } 
     }   
    }, .. 

. dòng sự kiện là những gì bạn cần sau đó bạn render biểu đồ của bạn

Tôi hy vọng nó giúp, tôi đã có vài giờ để con nó ra như thế nào nó hoạt động :)

Answer 6

Sử dụng jQuery 1.7.2 + HighCharts 3.0.2 vấn đề đã được giải quyết bằng cách sử dụng:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       //When is chart ready? 
       $(window).resize(); 
      } 
     }   
    }, .. 

Đây gần giống như @revo, nhưng sử dụng đối tượng 'cửa sổ' thay vì 'tài liệu'.

Answer 7

Giải pháp "không quá tinh tế" here, là điều cuối cùng đã giải quyết được cho tôi.

setTimeout(function() { 
       $(window).resize(); 
      }, 0); 

Sử dụng highcharts có trình bao bọc có tên DjangoChartit, với Python Django.