Biểu đồ Google vẽ lại / chia tỷ lệ khi thay đổi kích thước cửa sổ

Câu trả lời:

68

Để chỉ vẽ lại khi hoàn tất việc thay đổi kích thước cửa sổ và tránh nhiều trình kích hoạt, tôi nghĩ tốt hơn là nên tạo một sự kiện:

//create trigger to resizeEnd event     
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
    drawChart(data);
});
— Hemerson Varela
nguồn
40

Mã gốc của Google chỉ thực hiện điều này ở cuối:

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

Thay đổi nó bằng một chút javascript, bạn có thể thay đổi tỷ lệ khi cửa sổ thay đổi kích thước:

function resize () {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

window.onload = resize;
window.onresize = resize;
— Tiago Castro
nguồn
25
Có thể đáng nói là khi bạn tìm nạp "dữ liệu" qua ajax, việc kích hoạt XHTTPRequest trên 'bước' thay đổi kích thước MỌI cửa sổ có thể hơi căng thẳng trên máy chủ của bạn, tôi nghĩ tốt hơn là bằng cách nào đó lưu vào bộ nhớ cache các kết quả của yêu cầu ajax và sử dụng lại dữ liệu đó, nhưng giải pháp của bạn phù hợp với tôi! +1
— Michiel Cornille
1
không hoạt động với tôi, cần phải xóa các kết quả cũ khỏi div trước khi vẽ lại: $ ('# chart_div'). blank ();
— Mantas D,
3
window.onload = resize();tương đương vớiresize(); window.onload = undefined;
— Gustavo Rodrigues
Nó hoạt động như bạn mô tả khi làm cho cửa sổ lớn hơn, nhưng nếu bạn thu nhỏ cửa sổ, trước tiên bạn cần làm trống div biểu đồ, như Mantas D đã chỉ ra. $ ('# chart_div'). blank (); Điều này sẽ cho phép trình duyệt thu nhỏ div trước khi vẽ lại biểu đồ.
— Vincent
Tôi thích giải pháp này. Tôi không thích bộ hẹn giờ hoặc hàm đệ quy ở phía máy khách, tại sao lại sử dụng liên tục sức mạnh CPU?
— Roberto
8

Vì window.resizesự kiện kích hoạt nhiều lần trên mỗi sự kiện thay đổi kích thước, tôi tin rằng giải pháp tốt nhất là sử dụng smartresize.js và sử dụng smartdraw(). Điều này giới hạn số lượng biểu đồ được vẽ lại trên mỗi window.resize.

Bằng cách sử dụng js được cung cấp, bạn có thể làm điều đó đơn giản như sau:

// Instantiate and draw our user charts, passing in some options (as you probably were doing it)
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);

// And then:
$(window).smartresize(function () {
    chart.draw(data, options);
});
— Fonsini
nguồn
viết sai chính tả "otions" -> "options"
— Tomasz Majerski
4

Đây là cách đơn giản nhất mà tôi có thể thực hiện mà không gây ra quá nhiều căng thẳng cho trình duyệt:

    var chart1 = "done";

$(window).resize(function() {
if(chart1=="done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},1000);
}
});

Tất cả những gì nó làm là đợi 1 giây trước khi biểu đồ tải lại và không để hàm gọi lại trong khoảng thời gian chờ đợi này. vì các hàm thay đổi kích thước cửa sổ được gọi nhiều lần bất cứ khi nào bạn thay đổi kích thước cửa sổ, điều này giúp làm cho hàm chỉ thực sự hoạt động một lần mỗi khi bạn thay đổi kích thước cửa sổ, phần còn lại của lệnh gọi sẽ bị dừng lại bởi lệnh if.

Tôi hi vọng cái này giúp được

— Jamie Deakin
nguồn
Tuyệt vời vì sự đơn giản của nó.
— MastaBaba
3

Không có tùy chọn nào trong Google Visualization API để làm cho Google Charts phản hồi.

Nhưng chúng tôi có thể làm cho Google Biểu đồ phản hồi khi Thay đổi kích thước cửa sổ . Để làm cho Biểu đồ của Google đáp ứng, có thư viện jQuery tại GitHub - jquery-smartresize được cấp phép theo Giấy phép MIT, có khả năng thay đổi kích thước biểu đồ trong sự kiện thay đổi kích thước cửa sổ.

Dự án này trên GitHub có hai tệp kịch bản: -

jquery.debouncedresize.js: adds a special event that fires once after the window
has been resized.

&

jquery.throttledresize.js: adds a special event that fires at a reduced rate (no 
more double events from Chrome and Safari).

Đây là hai ví dụ về biểu đồ đáp ứng ...

  1. Biểu đồ hình tròn của Google thích ứng
  2. Biểu đồ thanh Google đáp ứng

Chúng tôi có thể thay đổi phần đệm dưới cùng của visualization_wrap để phù hợp với tỷ lệ co mong muốn của biểu đồ.

Calculate as Height / Width x 100
For a 16x9 display it would be 9/16 = 0.5625 x 100 = 56.25%
For a square it'd be 100%

Chúng tôi có thể tùy chỉnh tùy chọn chartarea của Google Chart để đảm bảo rằng các nhãn không bị cắt khi thay đổi kích thước .

— OO7
nguồn
2

Vẽ lại / bán lại tỷ lệ sơ đồ của Google khi thay đổi kích thước cửa sổ:

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});
— Srinu Basava
nguồn
Điều này thực sự không hiệu quả vì bạn chỉ phải gọi chart.draw (dữ liệu, tùy chọn); lần nữa. Điều này sẽ tìm nạp tất cả thông tin và thực hiện các công việc không cần thiết.
— Fonsini
làm thế nào để buộc vẽ lại ví dụ khi nhấp chuột chúng tôi buộc gọi hàm thay đổi kích thước.
— MaXi32,
1

Cá nhân tôi thích cách tiếp cận sau hơn, nếu Bạn có thể sống với việc sử dụng addEventListener và đừng ngại thiếu hỗ trợ cho IE <9.

var windowResizeTimer;
window.addEventListener('resize', function(e){
    clearTimeout(windowResizeTimer);
    windowResizeTimer = setTimeout(function(){
        chart.draw(data, options);
    }, 750);
});

Lưu ý việc sử dụng setTimeout()và clearTimeout()các chức năng và sự chậm trễ thêm 750 mili giây, mà làm này hơi ít chuyên sâu khi nhiều sự kiện thay đổi kích thước lửa liên tiếp nhanh chóng (mà thường là trường hợp cho các trình duyệt trên desktop khi thay đổi kích thước bằng một con chuột).

— Bwyan
nguồn
0

Tôi đã bị mắc kẹt với cùng một thứ trong nhiều ngày và tôi phát hiện ra rằng thêm một sự kiện hoạt động tốt nhất.

window.addEventListener("resize", drawChart);

Chỉ cần thêm dòng này sau khi khai báo hàm của bạn và nó sẽ hoạt động tốt.

Thay thế drawChart bằng tên hàm của bạn.

— Ansh Shrivastava
nguồn
-1

Sử dụng câu trả lời của Tiago Castro , tôi đã triển khai một biểu đồ đường để hiển thị minh chứng.

google.load('visualization', '1', {
  packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Compute Time');
  data.addColumn('number', 'Compute Times');
  console.log("--");
  data.addRows([
    [0, 0, 0],
    [10, 10, 15],
    [20, 20, 65]
  ]);
  console.log(data);
  var options = {
    height: 350,
    legend: {
      position: 'bottom'
    },
    hAxis: {
      title: 'Nb Curves'
    },
    vAxis: {
      title: 'Time (ms)'
    },
    backgroundColor: '#f1f8e9'
  };

  function resize() {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
  window.onload = resize();
  window.onresize = resize;

}
<script src='https://www.google.com/jsapi'></script>
<div id="chart_div">
Mở rộng đoạn mã

— b0y
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.