Question

我有一个线性函数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会出现问题。有谁看到我的错误？

更新：我刚刚意识到，只要网页加载，Google图表就会自动绘制，因此在绘制图表时，upfront和monthlyrate是未定义的。任何人都有关于如何解决这个问题的建议？我想在按下提交按钮后让图表自己绘制，但我怎么能这样做？

Answer 1

我希望这会对你有所帮助。添加一个按此方式调用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

为什么这个谷歌图表没有这个功能呢？

1 个答案: