làm cách nào để vẽ Biểu đồ hình tròn của Google chỉ trên một sự kiện nhấp bằng javascript/jquery?

cách vẽ Biểu đồ hình tròn của Google chỉ trên sự kiện nhấp bằng javascript/jquery?
Tôi đã thử gọi drawChart trên sự kiện onclick mà không thành công.làm cách nào để vẽ Biểu đồ hình tròn của Google chỉ trên một sự kiện nhấp bằng javascript/jquery?

Từ api:

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Work',  11], 
      ['Eat',  2], 
      ['Commute', 2], 
      ['Watch TV', 2], 
      ['Sleep', 7] 
     ]); 

     var options = { 
      title: 'My Daily Activities' 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="piechart" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

Nguồn

2013-08-18 jsky

Tôi vừa nhận ra - có thể bạn hỏi vì bạn chỉ đơn giản là quên bao gồm jquery? :-) ví dụ như '' - và đó là lý do tại sao nỗ lực của bạn không hoạt động? – davidkonrad

Để mở rộng câu trả lời davidkonrad của , bạn nên gói sự kiện nhấp trong cuộc gọi lại từ t trình tải API của anh ấy, vì người dùng có kết nối chậm với máy chủ của Google có thể nhấp vào nút vẽ trước khi API được tải xong:

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  11], 
     ['Eat',  2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var options = { 
     title: 'My Daily Activities' 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 
} 
function initialize() { 
    $(/* click event element selector */).click(function() { 
     drawChart(); 
    }); 
} 
google.setOnLoadCallback(initialize); 
google.load("visualization", "1", {packages:["corechart"]});

Nguồn

2013-08-18 15:52:33 asgallant

Tôi đã làm điều này, nhưng tôi đã phát hiện ra tại sao nó không hoạt động. Div cho biểu đồ nằm trong một mẫu mà bản thân nó chỉ được hiển thị trên một sự kiện nhấp chuột. Div không tồn tại cho đến sau sự kiện đó, vì vậy javascript không thể tìm thấy nó. – jsky

Chỉ cần quấn cuộc gọi đến drawchart vào một handler nhấp chuột thay vì OnLoadCallback:

$('html, body').click(function() { 
    drawChart(); 
    });

Tổng số các kịch bản:

<script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Work',  11], 
      ['Eat',  2], 
      ['Commute', 2], 
      ['Watch TV', 2], 
      ['Sleep', 7] 
     ]); 

     var options = { 
      title: 'My Daily Activities' 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
     chart.draw(data, options); 
     } 

     $('html, body').click(function() { 
     drawChart(); 
     }); 

    </script>

Nguồn

2013-08-18 15:06:00 davidkonrad

làm cách nào để vẽ Biểu đồ hình tròn của Google chỉ trên một sự kiện nhấp bằng javascript/jquery?

Trả lời

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