用html5绘制折线图的实例代码_html5教程技巧
用html5绘制折线图的实例代码_html5教程技巧<html> <canvas id="a_canvas" width="1000" height="700">canvas> <script> (function (){ window。
addEventListener("load" function(){ var data = [100,-1000,0,700]; // 获取上下文 var a_canvas = document。getElementById('a_canvas'); var context = a_canvas。
getContext("2d"); // 绘制背景 var gradient = context。createLinearGradient(0,0,0,300); // gradient。addColorStop(0,"#e0e0e0"); //gradient。
addColorStop(1,"#ffffff"); context。fillStyle = gradient; context。fillRect(0,0,a_canvas。width,a_canvas。height); // 描绘边框 var grid_cols = data。
length + 1; var grid_rows = 4; var cell_height = a_canvas。height / grid_rows; var cell_width = a_canvas。width / grid_cols; context。
lineWidth = 1; context。strokeStyle = "#a0a0a0" // 结束边框描绘 context。beginPath(); // 准备画横线 /*for (var col = 0; col <= grid_cols; col++) { var x = col * cell_width; context。
moveTo(x,0); context。lineTo(x,a_canvas。height); } // 准备画竖线 for(var row = 0; row <= grid_rows; row++){ var y = row * cell_height; context。
moveTo(0,y); context。lineTo(a_canvas。width, y); }*/ //划横线 context。moveTo(0,a_canvas。height/2); context。lineTo(a_canvas。width,a_canvas。
height/2); //画竖线 context。moveTo(0,0); context。lineTo(0,a_canvas。height); context。lineWidth = 1; context。strokeStyle = "#c0c0c0" context。
stroke(); var max_v =0; for(var i = 0; i<data。length; i++){ var d=0; if(data[i]<0) {dd=d-data[i]; } else{d=data[i];}; if (d > max_v) { max_v =d}; } max_vmax_v = max_v * 1。
1; // 将数据换算为坐标 var points = []; for( var i=0; i < data。length; i++){ var v= data[i]; var px = cell_width * (i +1); var py = a_canvas。
height/2 - a_canvas。height*(v / max_v)/2; points。push({"x"px,"y"py}); } // 绘制折现 context。beginPath(); context。moveTo(points[0]。
x, points[0]。y); for(var i= 1; i< points。length; i++){ context。lineTo(points[i]。x,points[i]。y); } context。lineWidth = 2; context。
strokeStyle = "#8BA9FF" context。stroke(); //绘制坐标图形 for(var i in points){ var p = points[i]; context。beginPath(); context。
arc(p。x,p。y,4,0,2*Math。PI); //实心圆 /* context。fillStyle = "#000"*/ //空心圆 context。strokeStyle = "#000" context。stroke(); context。
fillStyle="white" context。fill(); } //添加文字 for(var i in points) { var p = points[i]; context。beginPath(); context。fillStyle="black" context。
fillText(data[i], p。x + 1, p。y - 15); } },false); })(); script> html>运行结果如下:。
答:详情>>
答:详情>>
答:已知的多入牛毛,未知的或许等你开发。详情>>
答:炒股,买卖期货,开网络店铺。呵呵。。详情>>