HTML5画布线图，用户在其中输入数据
我的HTML5画布图有点问题。这可能有点难以解释，所以请耐心听我说 我需要在HTML5画布上创建一个图表，以便图表上每个点的位置基于其下方下拉菜单的值。无论何时更改值，都必须重新绘制图表，以避免重叠。请参见此处，了解其外观： 在每个点下面，都会有一个下拉菜单，其中包含多个值 此代码用于7个下拉菜单的数组：HTML5画布线图，用户在其中输入数据,html,loops,canvas,graph,line,Html,Loops,Canvas,Graph,Line,我的HTML5画布图有点问题。这可能有点难以解释，所以请耐心听我说 我需要在HTML5画布上创建一个图表，以便图表上每个点的位置基于其下方下拉菜单的值。无论何时更改值，都必须重新绘制图表，以避免重叠。请参见此处，了解其外观： 在每个点下面，都会有一个下拉菜单，其中包含多个值 此代码用于7个下拉菜单的数组： for(var i = 0; i < 7; i++) { var select = document.getElementById("graph"); var el = documen
for(var i = 0; i < 7; i++) {
var select = document.getElementById("graph");
var el = document.createElement("select");
el.setAttribute('id', 'no' +i);
select.appendChild(el);
var percents = new Array(21)
for(var z = 0; z < percents.length; z++){
var days = document.getElementById('no' + i);
var option = document.createElement("option");
option.text = z*5;
days.add(option);
}
}
<div id = "graph">
<table id = "no_table">
</table>
</div>
for（变量i=0；i<7；i++）{
var select=document.getElementById（“图形”）；
var el=document.createElement（“选择”）；
el.setAttribute（'id'，'no'+i）；
选择。追加子对象（el）；
变量百分比=新数组（21）
对于（变量z=0；z- 在循环中绘制这些圆
- 将每个圆链接到每个下拉框及其值时
- 并考虑画布的宽度和高度（宽度=600高度=400）
- 每次更改值时都会重新绘制图形
- 每个圆都必须用一条线连接
我真的很感激在这方面的任何帮助。如果我把你弄糊涂了，请告诉我 以下是示例代码供您开始使用：
- 创建一个
对象，其中包含每天的名称及其百分比值days - 以编程方式为一周中的每一天创建一个select元素，每个元素有3个百分比选项
- 侦听选定元素上的更改事件
- 数据更改时重新绘制html画布图
正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
//画布和上下文变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//图形样式化变量
var-x1=50；
var yAxis=200；
var保证金=30；
//具有每天百分比值的对象
风险日={
星期日：0，
星期一：0，
星期二：0，
星期三：0，
星期四：0，
星期五：0，
星期六：0
}
//每天将有3个百分比选项
var期权=[
{val:0，文本：“0%”，
{val:50，文本：“50%”，
{val:100，文本：“100%”，
];
//为一周中的每一天构建html select元素
for（var dayName，以天为单位）{
var select=$（''）.attr（“id”，dayName）.addClass（“myData”）.appendTo（“body”）；
$（选项）。每个（函数（）{
选择.append（$（“”）.attr（'value'，this.val）.text（this.text））；
});
};
//侦听组合框上的更改事件
//相应地重新绘制图表
$（“.myData”）.change（函数（e）{
天[this.id]=$（this.val（）；
draw（）；
});
//画开始图
draw（）；
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
var i=0；
for（var日，以天为单位）{
var值=天[天]；
如果（天=“星期日”）{
ctx.moveTo（x1+保证金*（i++），yAxis天[天]；
}否则{
ctx.lineTo（x1+保证金*（i++），雅克西斯天[天]；
}
}
ctx.stroke（）；
var i=0；
for（var日，以天为单位）{
var值=天[天]；
ctx.beginPath（）；
ctx.弧（x1+边距*（i++），yAxis值，8,0，数学PI*2）；
ctx.closePath（）；
ctx.fill（）；
}
}
}); // end$（函数（）{}）；
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// canvas and context variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// graph styling variables
var x1=50;
var yAxis=200;
var margin=30;
// an object with the percentage value for each day
var days={
Sunday:0,
Monday:0,
Tuesday:0,
Wednesday:0,
Thursday:0,
Friday:0,
Saturday:0
}
// each day will have 3 percentage options
var options=[
{val:0,text:"0%"},
{val:50,text:"50%"},
{val:100,text:"100%"},
];
// build the html select elements for each day of the week
for(var dayName in days){
var select = $('<select>').attr("id",dayName).addClass("myData").appendTo('body');
$(options).each(function() {
select.append($("<option>").attr('value',this.val).text(this.text));
});
};
// listen for change events on the comboboxes
// redraw the graph accordingly
$(".myData").change(function(e){
days[this.id]=$(this).val();
draw();
});
// draw the beginning graph
draw();
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
var i=0;
for(var day in days){
var value=days[day];
if(day=="Sunday"){
ctx.moveTo(x1+margin*(i++),yAxis-days[day]);
}else{
ctx.lineTo(x1+margin*(i++),yAxis-days[day]);
}
}
ctx.stroke();
var i=0;
for(var day in days){
var value=days[day];
ctx.beginPath();
ctx.arc( x1+margin*(i++), yAxis-value,8,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="selects"></div>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>