0

我有一个加载谷歌图表 API 并绘制图表的 javascript 文件，以及另一个处理页面上的 html 表单的 javascript 文件。我想将这两者融合在一起，因为表单将为图表提供数据。但是，当我尝试将谷歌图表 js 文件 ( graph.js) 放在那里时，它拒绝加载图表。我试过把它放在几个位置，但只有当它graph.js是一个单独的 js 文件并在 html 文档中链接时才会加载。有人可以告诉我如何正确组合这两个文件：

CostComparer.js（表单处理程序）：

$(document).ready(function(){
    //variable setup
    var wifi;
    var firewall;
    var backup;
    var vpn; 
    var install; 
    var result;

    $('#submit').click(function(){ 
        $("#chart_div").show('slow'); 
        $("#table_div").show('slow'); 

        wifi = $('input[name=wifiPrice]').val(); 
        firewall = $('input[name=firewallPrice]').val(); 
        backup = $('input[name=backupPrice]').val(); 
        vpn = $('input[name=vpnPrice]').val(); 
        install = $('input[name=installPrice]').val(); 

        result = parseInt(wifi) + parseInt(firewall) + parseInt(backup) + parseInt(vpn) + parseInt(install); 

        var resultbox = $('#result'); 
        var cccontainer = $('#cccontainer'); 


        if(resultbox.height() < 10){
            cccontainer.hide('slow').delay(500); 
            cccontainer.show('slow'); 
            setTimeout(function() {
                resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
            }, 500);
        } else {
            resultbox.empty()
            cccontainer.hide('slow').delay(500); 
            cccontainer.show('slow'); 
            setTimeout(function() {
                resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
            }, 500);
        }

    });
});

和graph.js：

google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);


var competitorCost = function(time){
    return 3000 + (time * 300)
};

var ourCost = function(time){
    return 1000 + (time * 50); 
};

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Months', 'Entreda', 'Competitors'],
        ['0', ourCost(0), competitorCost(0)],
        ['6', ourCost(6), competitorCost(6)],
        ['12', ourCost(12), competitorCost(12)],
        ['18', ourCost(18), competitorCost(18)],
        ['24', ourCost(24), competitorCost(24)]
    ]);

    var options = {
        title: 'Entreda vs Competitor Costs',
        width: 445,
        height: 250,
        pointSize: 5
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
4

1 回答 1

0

我的编译器似乎有问题。它在附加graph.js到外部的底部后起作用$document.ready()：

$(document).ready(function(){
     //variable setup
    var wifi;
    var firewall;
    var backup;
    var vpn; 
    var install; 
    var result;

    $('#submit').click(function(){ 
        $("#chart_div").show('slow'); 
        $("#table_div").show('slow'); 

        wifi = $('input[name=wifiPrice]').val(); 
        firewall = $('input[name=firewallPrice]').val(); 
        backup = $('input[name=backupPrice]').val(); 
        vpn = $('input[name=vpnPrice]').val(); 
        install = $('input[name=installPrice]').val(); 

        result = parseInt(wifi) + parseInt(firewall) + parseInt(backup) + parseInt(vpn) + parseInt(install); 

        var resultbox = $('#result'); 
        var cccontainer = $('#cccontainer'); 


        if(resultbox.height() < 10){
            cccontainer.hide('slow').delay(500); 
            cccontainer.show('slow'); 
            setTimeout(function() {
                resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
            }, 500);
        } else {
            resultbox.empty()
            cccontainer.hide('slow').delay(500); 
            cccontainer.show('slow'); 
            setTimeout(function() {
                resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
            }, 500);
        }

    });
}); 

google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);


var competitorCost = function(time){
    return 3000 + (time * 300)
};

var ourCost = function(time){
    return 1000 + (time * 50); 
};

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Months', 'Entreda', 'Competitors'],
        ['0', ourCost(0), competitorCost(0)],
        ['6', ourCost(6), competitorCost(6)],
        ['12', ourCost(12), competitorCost(12)],
        ['18', ourCost(18), competitorCost(18)],
        ['24', ourCost(24), competitorCost(24)]
    ]);

    var options = {
        title: 'Entreda vs Competitor Costs Over Time',
        width: 480,
        height: 270,
        pointSize: 5
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
于 2013-07-01T16:53:09.500 回答