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>

Answer 2

难道你不能只调用drawChartAjax（），你的示例中会调用警报吗？

Answer 3

尝试将函数调用放入onclick：

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

Answer 4

$(function(){
    $("a.display_chart").click(function(e){
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChartAjax);
        e.preventDefault();
    });
});

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'});
    }

点击执行功能

4 个答案: