Sử dụng .hide() và .show() với Google Visualization

Tôi đã tạo biểu đồ đường kẻ bằng hình ảnh hóa google. Tôi đã thử nghiệm nó và nó hoạt động như mong đợi. Vấn đề là khi tôi bắt đầu trang với .hide() trên hình ảnh và sau đó nhấp vào nút để hiển thị nó, nó sẽ không hiển thị trực quan hóa. Đây là một phiên bản cắt giảm của những gì tôi có.Sử dụng .hide() và .show() với Google Visualization

<script language="JavaScript"> 
    $(document).ready(function(){ 
     $('#visualization').hide(); 
     $('#show').click(function() { 
      $('#visualization').show(); 
     }); 
     $('#hide').click(function() { 
      $('#visualization').hide(); 
     }); 

    }); 
// Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']}); 
// Begin Annoted Time Line Chart - 1 
     function drawVisualization() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Number of Users'); 
      //data.addColumn('string', 'title1'); 
      data.addRows(10); 
data.setValue(0, 0, new Date(2011, 11 ,1)); 
      data.setValue(0, 1, 21); 
      data.setValue(1, 0, new Date(2011, 11 ,2)); 
      data.setValue(1, 1, 24); 
// Do this for the rest of the chart 

... 
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
       document.getElementById('visualization')); 
      annotatedtimeline.draw(data, {'displayAnnotations': true}); 
     } 

     google.setOnLoadCallback(drawVisualization); 

</script> 
<body> 
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a> 
    <div style="border:solid"> 
       <div id="visualization" style="width: 100%; height: 400px;"></div> 
     </div> 
</body>

Nếu tôi nhận xét .hide() ở đầu 2 nút để hiển thị và ẩn công việc, nhưng khi ban đầu ẩn nó không hoạt động. Tôi đã thử đặt mã cho hình ảnh trên phần truy vấn nhưng nó vẫn sẽ không hoạt động.

Bất kỳ ai biết cách sửa lỗi này?

Cảm ơn,

Craig

EDIT

tôi đã có thể sử dụng setTimeout (chức năng này() { $ ('# tab') tab();. // hoặc ẩn() }, 50); });

Nguồn

2011-12-20 craigtb

Tôi không biết về mã này cụ thể, nhưng có mã mà phát hiện khi nó bị ẩn và không làm điều đó là công việc khi đó là trường hợp. Điều này thường được thực hiện vì lý do hiệu quả vì vậy rất nhiều CPU hoặc bộ nhớ không bị lãng phí khi đối tượng bị ẩn. Để giải quyết vấn đề đó, bạn phải render nó sau khi làm cho nó hiển thị thay vì trước đây. – jfriend00

Biểu đồ Gviz sẽ hiển thị không chính xác (thường cực nhỏ/gần ẩn) nếu được hiển thị trong phần tử ẩn. Bạn cần vẽ lại biểu đồ sau khi hiển thị phần tử.

Một ví dụ đơn giản để làm điều này, dựa trên mã của bạn, sẽ là một cái gì đó dọc theo dòng của việc thêm chức năng vẽ của bạn để gọi lại của chương trình xử lý:

$('#visualization').show(function() { 
    drawVisualization(); 
});

Các callback sẽ được thực hiện một lần chương trình hoàn tất.

Nguồn

2011-12-22 07:57:19 oli

Tôi đã thử lời khuyên do Oli cung cấp ở trên, nhưng bản vẽ lại không hoạt động đối với tôi trên Chrome.

Cách tiếp cận tốt hơn cho tôi là xác định chiều cao và chiều rộng trong biểu đồ với số cố định. https://developers.google.com/chart/interactive/docs/gallery/bubblechart mô tả các tùy chọn.

tôi chỉ đơn giản sử dụng này và nó hoạt động:

var options = { 
     title: '<%= t("views.participants.ranking.s23") %>', 
     colors:['#3f3f3f', '#199EDA'], 
     chartArea: {top: 30, left: 80, width: 490, height: 300}, 
     height: 500, 
     width: 710, 
     legend: {position: 'right', alignment: 'start'}, 
     sizeAxis: {maxSize: 20} 
     }

Nguồn

2013-03-31 14:58:57

Sử dụng .hide() và .show() với Google Visualization

Trả lời

Các vấn đề liên quan