如何在谷歌图表中使用输入表单值

时间:2016-04-20 07:50:57

标签: javascript jquery charts google-visualization

我创建了一个表单并尝试在Google图表中显示提交的值。我试图为drawChart()创建包装器,并希望在单击提交按钮后加载drawChart()。但是,drawChart()函数被调用onload。我的代码有什么问题?

HTML -

 <form method= "post" action = "#" id="formValue"> 
        <label><input type="number" value="1" id="ip1"/>inpu1</label>
        <label><input type="number" value="2" id="ip2"/> input2</label>
        <input type="submit" value="Add" onclick="initializer()"/>
    </form>

JS -

<script>
var ip1, ip2;
var str = "hello";
var str2 = "hello2";
function initializer(){
    ip1 = document.getElementById("ip1").value;
    ip2 = document.getElementById("ip2").value;
    drawChart();
}
 google.charts.setOnLoadCallback(initializer);
  google.charts.load('current', {'packages':['corechart']});

function drawChart() {
    var x2= [
    [
        str,
        ip1
    ],
    [
        str2,
        ip2
    ]
];
    var data = new google.visualization.DataTable();
     data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows(x2);

    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':500,
                   'height':600};


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

1 个答案:

答案 0 :(得分:0)

删除此...

google.charts.setOnLoadCallback(initializer);

在...时运行initializer

google.charts.load('current', {'packages':['corechart']});

结束了。