JavaScript-给出一组数,使其显示在浏览器中以坐标轴的形式连接成线。

项目合作 项目合作 主题:1030 回复:2135

JavaScript-给出一组数,使其显示在浏览器中以坐标轴的形式连接成线。

灵芸 发布于 2017-08-30 字数 369 浏览 1092 回复 2

给出一组可修改的数。编号为1到50.比如1对应10,2对应12,3对应5.将其显示在坐标轴中,x坐标即为1到50,纵坐标为对应的数字,可以取到50个点,将这些点依次连成线。并且当数字变化的时候图像也发生变化。
通俗点说就是,奥运金牌榜横坐标为国家纵坐标为奖牌数。连成线看到起伏变化的效果。当第2天金牌数发生变化是图像也会变化 。 在浏览器中显示。
求各位大哥帮帮忙。我的工作啊。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

晚风撩人 2017-10-17 2 楼

哥来拯救你,你可以使用JSXGraph,针对y=F(x)画出一组曲线即可。

夜无邪 2017-09-21 1 楼

给你贴一下HTML5 canvas绘图会用到的函数和说明;
然后还有我改过的一个例子供你参考

1、clecrRect(left,top,width,height) 清除制定矩形区域,
2、fillRect(left,top,width,height) 绘制矩形,并以fillStyle填充。
3、fillText(text,x,y) 绘制文字;
4、strokeRect(left,top,width,height) 绘制矩形,以strokeStyle绘制边界。
5、beginPath(): 开启路径的绘制,重置path为初始状态;
6、closePath(): 绘制路径path结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线;
7、moveTo(x,y): 设置绘图其实坐标。
8、lineTo(x,y); 绘制从当前其实位置到x,y直线。
9、fill(),stroke(),clip() 在完成绘制的最后的填充和边界轮廓,剪辑区域。
10、arc(): 绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小;
11、rect(): 矩形路径;
12、drawImage(Imag img): 绘制图片;
13、quadraticCurveTo(): 二次样条曲线路径,参数两个控制点;
14、bezierCurveTo(): 贝塞尔曲线,参数三个控制点;
15、translate(x,y): 平移变换,原点移动到坐标(x,y);
16、rotate(a): 旋转变换,旋转a度角;
17、scale(x,y): 伸缩变换;
18、save(),restore():提供和一个堆栈,保存和恢复绘图状态,save将当前绘图状态压入堆栈,restore出栈,恢复绘图状态;

<!doctype html>
<html>
<head>
<script type="text/javascript" src="stat.js">
</script>
<script type="text/javascript">
//写上数字
function writeFont(ctx,myList)
{
for(var i=0;i<(myList.length-10);i++)
{
countAngel=0;
ctx.font = "20px Times New Roman";  
ctx.fillStyle = "Black";
for(var j=0;j<=i;j++)
{
if(i==j)
countAngel+=Math.PI2myList[j+10]/200;
else
countAngel+=Math.PI2myList[j+10]/100;
}
ctx.fillText(myList[i]+": "+myList[i+10]+"%", 100Math.cos(countAngel)-20, 100Math.sin(countAngel)); 
}
}
//获得填充的样式
function getColorStyle(ctx)
{
var r=Math.floor(Math.random()230+20);
var g=Math.floor(Math.random()
230+20);
var b=Math.floor(Math.random()230+20);
ctx.fillStyle="rgb("+r+","+g+","+b+")";
}
//返回myList中最大的值
function getTheMax(myList)
{
var tmp=0;
for(var i=0;i<(myList.length-10);i++)
{
if(Number(tmp)<Number(myList[i+10]))
tmp=myList[i+10];
}
return tmp;
}
//画折线图
function drawBrokenLine(myList,x,y,width,height)
{
var mycanvas=document.createElement("canvas"); //自己创建一个canvas
mycanvas.style.cssText+=";border:1px solid #aaa"; //加上边框
mycanvas.width=width; //canvas的高度和宽度只能这么来设定,不能用style来设定
mycanvas.height=height;
document.body.appendChild(mycanvas);
mycanvas.style.position="absolute";
var ctx=mycanvas.getContext("2d");
//drawCoordinate(ctx);
ctx.translate(30,height-10);
ctx.font = "18px Times New Roman";  
ctx.fillStyle = "Black";
ctx.lineWidth="3";
ctx.strokeStyle="black";
ctx.beginPath();
var mass=width/8;
ctx.fillText(myList[0],0,0);
//alert(-myList[10]/getTheMax(myList)
306)
ctx.moveTo(0,-myList[10]/getTheMax(myList)*306);

for(var i=1;i&lt;(myList.length-10);i++)
{
    ctx.lineTo(i*mass,Math.round(-myList[i+10]/getTheMax(myList)*306));
    ctx.fillText(myList[i],i*mass,0);
}
ctx.stroke();
for(var i=0;i&lt;(myList.length-10);i++)
{
    ctx.beginPath();
    ctx.arc(i*mass,Math.round(-myList[i+10]/getTheMax(myList)*306),5,0,Math.PI*2,false);
    getColorStyle(ctx);
    ctx.fill();
}

ctx.font = "12px Times New Roman"; 
ctx.fillStyle = "Black"; 
for(var i=0;i&lt;9;i++)
{
    ctx.fillText(Math.round(getTheMax(myList)/9*(i+1))+"%",-25,-34*(i+1));
}
mycanvas.style.cssText+=";width:"+width+"px;height:"+height+"px;left:"+x+"px;top:"+y+"px";  

}

function init()
{
var myList=new Array();
myList[0]="1天";
myList[1]="2天";
myList[2]="3天";
myList[3]="4天";
myList[4]="5天";
myList[5]="6天";
myList[6]="7天";
myList[7]="8天";

    myList[10]="8";
    myList[11]="20";
    myList[12]="12";
    myList[13]="15";
    myList[14]="25";
    myList[15]="5";
    myList[16]="10";
    myList[17]="5";
    drawBrokenLine(myList,100,10,600,500);  //data,x,y,width,height

}
</script>
</head>
<body onload="init()">
<canvas id="pad" ></canvas>
</script>
</body>
</html>