点击执行功能

Question

我有下面的脚本运行良好,即它在页面加载时在屏幕上生成一个图表:

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChartAjax);

    function drawChartAjax() {
        $.ajax({ 
            url: 'json_data.aspx', 
            type: 'POST', 
            dataType: 'json', 
            success: function(data) { 
                drawChart(data); 
            } 
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'did');
        data.addColumn('number', '09/10'); 

        data.addRows(json.length);  

        var l = json.length, i, x = 0, y = 0; 
        for(i = 0; i < l; i++) { 
            data.setValue(y, x, json[i].did); x++; 
            data.setValue(y, x, json[i].v1); x=0; 
            y++; 
        } 

        var chart = new google.visualization.BarChart( document.getElementById('chart_div') );
        chart.draw(data, {width: 300, height: 400, legend: 'bottom', title: 'title goes here'});
    }
</script>

单击链接时我需要做什么才能加载它？

我知道我可以显示如下警告:

$(document).ready(function(){
    $("a.display_chart").click(function(event){
        alert("display the chart");
        event.preventDefault();
    });
});

Answer 1

最新答案.

在搜索了什么后.setOnLoadCallback(),

事实证明你只需要点击即可调用该功能

$(document).ready(function(){
    $("a.display_chart").click(function(event){
        drawChartAjax();
        event.preventDefault();
    });
});

以前的答案.

搬进google.setOnLoadCallback(drawChartAjax);你的click活动.

像这样,

$(document).ready(function(){
    $("a.display_chart").click(function(event){
        google.setOnLoadCallback(drawChartAjax); // this line should not appear anymore there at the top
        event.preventDefault();
    });
});

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawChartAjax);

    function drawChartAjax() {
        $.ajax({ 
            url: 'json_data.aspx', 
            type: 'POST', 
            dataType: 'json', 
            success: function(data) { 
                drawChart(data); 
            } 
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'did');
        data.addColumn('number', '09/10'); 

        data.addRows(json.length);  

        var l = json.length, i, x = 0, y = 0; 
        for(i = 0; i < l; i++) { 
            data.setValue(y, x, json[i].did); x++; 
            data.setValue(y, x, json[i].v1); x=0; 
            y++; 
        } 

        var chart = new google.visualization.BarChart( document.getElementById('chart_div') );
        chart.draw(data, {width: 300, height: 400, legend: 'bottom', title: 'title goes here'});
    }

    $(document).ready(function(){
        $("a.display_chart").click(function(event){
            google.setOnLoadCallback(drawChartAjax); // this line should not appear anymore there at the top
            event.preventDefault();
        });
    });
</script>