0

Google チャート API を読み込んでグラフを描画する JavaScript ファイルと、ページ上の HTML フォームを処理する別の JavaScript ファイルがあります。フォームがグラフにデータを提供するため、これら 2 つを融合させたいと思います。ただし、Google Charts js ファイル ( graph.js) を配置しようとすると、グラフの読み込みが拒否されます。いくつかの場所に配置しようとしましたがgraph.js、html ドキュメント内でリンクされている別の js ファイルである場合にのみ読み込まれます。これら2つのファイルを適切に結合する方法を教えてください:

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 に答える