通过提示命令自由添加数据

时间:2019-07-16 03:28:47

标签: javascript html api

我无法在html的脚本部分中连接提示命令以接受输入的数据并将其输出到Google图表中。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Chart</title>
</head>

<body>
<h1>Google Chart</h1>
<div id = "chart1"></div>

<br><hr><br>
<button id = "draw_chart">graph_show</button>
<button id = "input_data">data_input</button>
<div id = "chart2"></div>


<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    var score = [];
    var time = [];







document.getElementById("input_data").addEventListener('click',function(){

      drawChart2()
});

    function drawChart2(){

/*
score=[90,70,25,65,33];
time=[10,8,3,9,4];

*/
var time=prompt('input your study time');
var score=prompt('input your grade score');





       var data2=new google.visualization.DataTable();
       data2.addColumn('number','score');
       data2.addColumn('number','study time');

for(i=0;i<score.length;i++){
data2.addRow([score[i],time[i]]);
}


var options2 ={title:'成績と勉強時間のグラフ',
              hAxis:{title:'grade',minValue:0,maxValue:100},
              vAxis:{title:'Study time',minValue:0,maxValue:30},
            legend: 'none'

};

var chart= new google.visualization.ScatterChart(document.getElementById('chart2'));
chart.draw(data2,options2);
}


</script>
</body>
</html>

我想通过html脚本部分中的提示符命令输入数据(也称为数字),然后使输入的数据出现在我的Google可视化图表中。

在“ document.getElementById(“ input_data”)。addEventListener('click',function(){....“)位置之后,我要输入我在此处所说的内容。以上其余信息均不相关解决问题。

1 个答案:

答案 0 :(得分:0)

prompt函数的结果始终是一个字符串,如果要将字符串转换为对象/数组,则需要使用JSON.parse函数:

var time = JSON.parse(prompt('input your study time'));
var score = JSON.parse(prompt('input your grade score'));

然后您可以输入类似[90,70,25,65,33]


如果您需要一个一个地输入它们,以下是解决方法:

var score = [];
var time = [];

for(let i = 0; i < 5; i++) {
  score.push(prompt(`input score #${i}`));
  time.push(prompt(`input time #${i}`));
}