使用谷歌图表API的Javascript字母频率图[家庭作业]_Javascript_Api_Charts

使用谷歌图表API的Javascript字母频率图[家庭作业]

javascript api charts

使用谷歌图表API的Javascript字母频率图[家庭作业],javascript,api,charts,Javascript,Api,Charts,我的任务是在文本区域输入一个句子，然后将其输出为HTML频率图，然后使用Google图表API输出我能够将其输出为HTML频率图，但我仍停留在谷歌图表API部分在generateAppitable（）函数的底部，我知道data.join（）部分正在检索单独列的值，但如果我删除该部分，则不会在底部显示字母。输入的默认值始终为5 我已经尝试从generateAtable（）函数中获取for循环，并将它们放入generateAppitable（）函数中，然后将data.join（）替换为myHei

我的任务是在文本区域输入一个句子，然后将其输出为HTML频率图，然后使用Google图表API输出

我能够将其输出为HTML频率图，但我仍停留在谷歌图表API部分

在

generateAppitable（）

函数的底部，我知道

data.join（）

部分正在检索单独列的值，但如果我删除该部分，则不会在底部显示字母。输入的默认值始终为5

我已经尝试从

generateAtable（）

函数中获取for循环，并将它们放入

generateAppitable（）

函数中，然后将

data.join（）

替换为

myHeight

，但这只在x轴上显示字母“A”，值为25（这是正确的），但我需要整个字母表

所以我的问题是，我将如何用之前获得的频率值（对于HTML表）填充GoogleChartAPI图像

var image=newimage（）；
var频率=新阵列（26）；
变量字母=新数组（26）；
函数html_chart（）
{
var table=document.getElementById（“表格”）；
输入=document.getElementById（“用户输入”）.value
table.innerHTML=generateTable（输入）；
}
函数api_table（）
{
var table=document.getElementById（“api_表”）；
table.innerHTML=generateAppitable（）；
}
函数getCharacterCounts（）
{
字母={}
对于（i=0；i=0）
字母[输入[i]]+=1
其他的
字母[输入[i]]=0
}
回信
}
函数生成器（输入）{
var-Pos=0；
var max=0；
var myHeight=0；
var newInput=input.toUpperCase（）；
对于（i=65；i<91；i++）
{
频率[Pos]=newInput.split（String.fromCharCode（i））.length-1；
Pos++；
}
对于（i=0；i最大值）{
最大值=频率[i]；
}
}
表=输入+“”；
表+=”；
表+=“字母频率100px”；
对于（i=0；i


编辑
Html代码
<html>
<body>
<form>
<textarea name = "text" style = "width:400px; height:200px" id = "user_input">The Quick Brown Fox Jumped Over The Lazy Dogs</textarea><br>
<input type = "button" value = "HTML Chart" onclick ="html_chart()">
<input type = "button" value = "Reset Test Data" onclick= "eraseText()">
<input type = "button" value = "Image Chart" onclick = "api_table()">
</form>

<div id = "table">
</div>

<div id = "api_table">
</div>

<style>
td {
    vertical-align:bottom; 
    horizontal-align:left; 
    padding:0;
    text-align: center;
    background-color: lightgrey;
}
</style>
</body>

<script type = "text/javascript" src = "code.js"/>
</script>

</html>


敏捷的棕色狐狸跳过了懒惰的狗

运输署{
垂直对齐：底部对齐；
水平对齐：左对齐；
填充：0；
文本对齐：居中；
背景颜色：浅灰色；
}

<html>
<body>
<form>
<textarea name = "text" style = "width:400px; height:200px" id = "user_input">The Quick Brown Fox Jumped Over The Lazy Dogs</textarea><br>
<input type = "button" value = "HTML Chart" onclick ="html_chart()">
<input type = "button" value = "Reset Test Data" onclick= "eraseText()">
<input type = "button" value = "Image Chart" onclick = "api_table()">
</form>

<div id = "table">
</div>

<div id = "api_table">
</div>

<style>
td {
    vertical-align:bottom; 
    horizontal-align:left; 
    padding:0;
    text-align: center;
    background-color: lightgrey;
}
</style>
</body>

<script type = "text/javascript" src = "code.js"/>
</script>

</html>