Javascript 如何制作一个HTML网页，允许用户直接在UI上制作自定义饼图？

这是我在Google Dev上找到的代码：

google.charts.load（'current'{
“包”：[“核心图表”]
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var-arr=[]；
var data=google.visualization.arrayToDataTable([
['答案'，'答案数量']，
['模板1'，1]，
['模板2'，2]
]);
变量选项={
标题：“调查问题的标题”
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}

---

谷歌图表基于一个谷歌数据表，它是一个数组数组。您可以在页面上的输入组以及这些组中的单个输入之间循环，以构建数据表

在这个代码段中，每组相关输入被称为一个项。每个项目对应于表中的一行（其每个相关输入值对应于行中的一列或单元格）

代码基于。有关详细说明，请参阅代码内注释

//加载google资源，完成后调用'googleIsReady'
load（'current'，{packages:['corechart']}）；
google.charts.setOnLoadCallback（googleIsReady）；
//主功能可以访问google资源
函数googleIsReady（）{
常数
//标识一些DOM元素
itemDivs=document.getElementsByCassName（“项目”），
makeChartBtn=document.getElementById（“makeChartBtn”），
pieChartDiv=document.getElementById（“pieChartDiv”），
//定义google对象（并指定在何处显示图表）
data=new google.visualization.DataTable（），
chart=新的google.visualization.PieChart（pieChartDiv）；
//单击按钮时调用assembleDataAndDrawChart
makeChartBtn.addEventListener（“单击”，组装数据和绘图图）；
//定义按钮上的单击侦听器
函数assembleDataAndDrawChart（）{
//循环通过'itemDivs'填充'dataArray'`
常量数据数组=[]；
for（让itemDiv中的itemDiv）{
常数
//获取此项的名称和百分比输入
itemInputsArray=Array.from（itemDiv.getElementsByTagName（“输入”），
//获取输入值（将百分比转换为数字）
itemData=itemInputsArray.map(
（输入）=>input.type==“数字”//condition
？+input.value//如果为真，`+`转换为数字
：input.value//如果为false，则保留字符串值
);
//将'itemData'数组添加为'dataArray'的项`
push（itemData）；
}
//绘制图表（或投诉无效数据）
if（总百分比等于100（数据数组））{
绘图（数据阵列）；
}
else{alert（“饼图必须总计100%”；}
}
//使用前面定义的google对象显示图表
函数绘图图（_dataArray）{
//（列名是硬编码的）
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Percentage'）；
data.addRows（_dataArray）；
chart.draw（data，null）；//调用google的`.draw`方法
}
//如果数据有效，则返回true
函数totalPercentageEquals100（_dataArray）{
设total=0；
for（let项为_dataArray）{
//分解每个“item”数组以在本地绑定值
[名称，百分比]=项目；
如果（name）{total+=percentage；}//将百分比相加
}
回报率（总=100）；
}
}

h1{字体大小：14px；}
.项目{页边距底部：0.2em；}
输入{边距：0.2em 0.1em；}
#makeChartBtn{边距：0.3em；}
#pieChartDiv{宽度：300px；高度：200px；}

输入最多3个项目的名称和百分比
名称
百分比
名称
百分比
名称
百分比
制表

一个没有解释的答案通常被认为不是很有用，因此被否决。对于那些不尝试自己的用户，填鸭式回答同样是不受欢迎的，但更为宽容。使用

br

标记而不是CSS在按钮周围生成空格是不合理的：）@HereticMonkey我决定尝试一下大家都在谈论的CSS。