代码之家 › 专栏 › 技术社区 › oshirowanen

单击执行函数

jquery javascript

oshirowanen · 技术社区 · 15 年前

我有下面的脚本,它工作得很好,即当页面加载时,它会在屏幕上生成一个图表:

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

4 回复 | 直到 15 年前

Reigel Gallarde 15 年前

最新答案 .

.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>

Espen Herseth Halvorsen 15 年前

不能在示例中调用警报的地方调用drawChartAjax()吗?

Dror Big McLargeHuge 15 年前

尝试将函数调用放在onclick中:

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

bcm 15 年前

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