HighCharts: Cách sử dụng reflow để cho phép tự động thay đổi kích thước sau khi thay đổi kích thước

Question

Trong ứng dụng Góc của chúng tôi, chúng tôi đang sử dụng highcarts-ng để thực hiện HighCharts của chúng tôi.

Đây là Chart Tối đa hóa và Giảm thiểu chức năng, hoạt động:

function expandChartPanel() { 
    vm.chartMaxed = !vm.chartMaxed; 

    viewHeader = ScopeFactory.getScope('viewHeader'); 
    highChart = ScopeFactory.getScope('highChart'); 

    var chart = highChart.chartObject; 
    var highChartContainer  = document.getElementById("highchart-container"); 
    var highChartContainerWidth = document.getElementById('highchart-container').clientWidth; 
    var highChartContainerHeight = document.getElementById('highchart-container').clientHeight; 

    var windowWidth = window.innerWidth; 
    var windowHeight = window.innerHeight; 

    if (vm.chartMaxed) { 

     vs.savedWidth = highChartContainerWidth; 
     vs.savedHeight = highChartContainerHeight; 

     console.log('savedWidth = ', vs.savedWidth); 
     console.log('savedHeight = ', vs.savedHeight); 

     root.chartExpanded   = true; 
     viewHeader.vh.chartExpanded = true; 
     highChart.highChartMax  = true; 

     highChartContainerHeight = document.getElementById('highchart-container').clientHeight; 
     windowWidth = window.innerWidth; 
     windowHeight = window.innerHeight; 

     highChart.chartConfig.size.width = windowWidth; 
     highChart.chartConfig.size.height = windowHeight - 220; 

     chart.setSize(windowWidth, windowHeight - 220); 
    } 
    else { 
     root.chartExpanded   = false; 
     viewHeader.vh.chartExpanded = false; 
     highChart.highChartMax  = false; 

     highChart.chartConfig.size.width = vs.savedWidth; 
     highChart.chartConfig.size.height = vs.savedHeight; 

     chart.setSize(vs.savedWidth, vs.savedHeight); 
    } 

    highChart.restoreChartSize(); 
} 

Dưới đây là chức năng reflow:

function restoreChartSize() { 
    console.log('restoreChartSize'); 
    if (!vs.chartObject.reflowNow) { 
     vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() { 
      this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); 
      this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); 
      this.setSize(this.containerWidth, this.containerHeight, true); 
      this.hasUserSize = null; 
     } 
    } 

    vs.chartObject.reflowNow(); 
} 

Chức năng này reflow trên, hoạt động hoàn hảo trong jsFiddle này, nhưng không phải trong ứng dụng của chúng tôi.

The full Gist file of our HighChartsDirective file.

Sau khi nhấp vào Phóng to, biểu đồ sẽ mở rộng đến kích thước đầy đủ của cửa sổ trình duyệt, nhưng sau khi kéo để thay đổi kích thước cửa sổ trình duyệt, tôi gọi hàm restoreChartSize, kích hoạt chỉnh lại.

Tuy nhiên kích thước của bảng xếp hạng không đi để tự động kích thước 100% 100%, nó đi trở lại kích thước ban đầu của bảng xếp hạng :(

Trước Tối đa hóa:

Sau Tối đa hóa chức năng:

Bây giờ sau khi thay đổi kích thước cửa sổ trình duyệt:

window.onresize = function(event) { 
    console.log('window resizing...'); 
    highChart = ScopeFactory.getScope('highChart'); 
    highChart.restoreChartSize(); 
    console.log('highChart.chartConfig = ', highChart.chartConfig); 
}; 

^trở lại kích thước tĩnh nhỏ hơn, không tự động kích thước 100%

Answer 1

Bạn có thể làm điều này bằng cách thêm một phương pháp mới để vạch ra rằng sẽ tự kích hoạt các quy trình ngược như vậy:

chart.reflowNow = function(){ 
    this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); 
    this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); 
    this.setSize(this.containerWidth, this.containerHeight, false); 
    this.hasUserSize = null; 
} 

Sau đó, bất cứ khi nào bạn muốn thoát khỏi thay đổi kích thước của nhãn hiệu sử dụng setSize() chỉ cần gọi chart.reflow()

Dưới đây là một ví dụ làm việc: jsFiddle

tham khảo lấy từ: github-issue

CẬP NHẬT cho ng-highcharts người dùng

Để làm điều này khi sử dụng thư viện ng-highcharts, bạn chỉ có thể kéo ra đối tượng biểu đồ trong bộ điều khiển có phụ thuộc highcharts-ng và thêm chức năng reflowNow, như vậy:

var chart = this.chartConfig.getHighcharts(); 
chart.reflowreflowNow = function(){ ... } 

Đây cũng là cách được khuyến nghị để kéo biểu đồ ra để thực hiện các công việc tùy chỉnh theo tác giả của ng-highcharts như được ghi chú here và điều này fiddle.

Answer 2

Tôi đã tìm ra giải pháp thay thế để trở thành thứ duy nhất tôi có thể làm việc, và nó thực sự khá đơn giản và thẳng thắn để làm.Trong trường hợp bất cứ ai khác đang tìm kiếm một sửa chữa cho điều này, đây là liên kết đến các nguồn lực hữu ích và giải quyết vấn đề cho tôi.

Bạn có thể chỉ cần thêm mục này vào đối tượng cấu hình biểu đồ của mình, ở cùng cấp với config.series hoặc config.options. Thông báo thông tin bình luận tài liệu tham khảo nhưng các giải pháp thực tế mà làm việc cho tôi sử dụng $ timeout với 0 giây, đây

* Để sử dụng highcharts-ng rõ ràng

http://plnkr.co/edit/14x7gfQAlHw12XZVhWm0?p=preview

$scope.chartConfigObject = { 

    // function to trigger reflow in bootstrap containers 
    // see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211 
    func: function(chart) { 
     $timeout(function() { 
      chart.reflow(); 
      //The below is an event that will trigger all instances of charts to reflow 
      //$scope.$broadcast('highchartsng.reflow'); 
     }, 0); 
    } 
};