0

我有一个线性函数competitorCost(time)，我想在谷歌图表上绘制。我让它使用表格接收一些数据并使用这些数据来创建线性函数。但是它不会绘制图表。

var upfront; 
var monthlyrate;
var wifi;
var firewall;
var backup;
var vpn; 
var install; 
var result;

var competitorCost = function(time){
    return upfront + (time * monthlyrate);
};

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

$(document).ready(function(){


    $('#submit').click(function(){ 
        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(); 
        cloudbackup = $('input[name=cloudbackuprate]').val(); 
        support = $('input[name=supportrate]').val(); 

        upfront = parseInt(wifi) + parseInt(firewall) + parseInt(backup) + parseInt(vpn) + parseInt(install); 
        monthlyrate = parseInt(cloudbackup) + parseInt(support); 
    });
}); 

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


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

competitorCost(time)不作图，但ourCost(time)作图。如果我在实例化它们时给出upfront和monthlyrate值，则函数图就好了，所以函数中使用upfront和monthlyrate使用存在问题。有人看到我的错误吗？

更新：我刚刚意识到谷歌图表在页面加载后立即绘制，因此upfront在monthlyrate绘制图表时未定义。有人对我如何解决这个问题有建议吗？我想在按下提交按钮后让图表自己绘制，但我该怎么做呢？

4

1 回答 1

0

我希望这会对你有所帮助。添加一个这样调用的按钮loadChart()。

<input type="button" id="btn" value="Submit" onclick="loadChart()">

loadChart()是_

function loadChart() {

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

单击按钮后，这将加载谷歌图表。

有关更多与谷歌图表相关的查询，请查看此jqfaq.com

于 2013-07-09T09:43:35.043 回答