网页曲线图代码（曲线图数据）

今天给各位分享网页曲线图代码的知识，其中也会对曲线图数据进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何使用html5的canvas 做一个曲线图----y= cos(x)曲线制作
• 2、html怎么用js特效做折线图？
• 3、html里怎么做动态的曲线图呢？如截图

如何使用html5的canvas 做一个曲线图----y= cos(x)曲线制作

!DOCTYPE html

html

head

    titleCos演示/title

    meta charset='utf-8'

/head

body style='text-align:center'

canvas width='800' height='600' id='canvas' style='border:1px solid'

/canvas

script

    var canvas=document.getElementById('canvas');

    var ctx=canvas.getContext('2d');

    function drawAxis(){

        ctx.translate(400,300);

        //x 轴

        ctx.beginPath();

        ctx.moveTo(-380,0);

        ctx.lineTo(380,0);

        ctx.lineTo(372,3);

        ctx.lineTo(372,-3);

        ctx.lineTo(380,0);

        ctx.stroke();   //描边

        //y 轴

        ctx.moveTo(0,200);

        ctx.lineTo(0,-200);

        ctx.lineTo(3,-192);

        ctx.lineTo(-3,-192);

        ctx.lineTo(0,-200);

        ctx.stroke();   //描边

        //画坐标

        ctx.save();

        ctx.strokeStyle='rgba(100,100,255,0.5)';

        ctx.moveTo(-Math.PI*100,100);

        ctx.lineTo(-Math.PI*100,-100);

        ctx.lineTo(Math.PI*100,-100);

        ctx.lineTo(Math.PI*100,100);

        ctx.lineTo(-Math.PI*100,100);

        ctx.stroke();   //描边

        ctx.fillStyle='rgba(0,0,0,1)';

        ctx.fillText("-π",-Math.PI*100,10);

        ctx.fillText("π",Math.PI*100,10);

        ctx.fillText("-1",5,100);

        ctx.fillText("1",5,-100);

        ctx.restore();

    }

    function drawCos(){

        var x = -Math.PI*100;

        ctx.beginPath();

        ctx.moveTo(x,100);

        for(x = -Math.PI*100;xMath.PI*100;x++){

            var cx = x/100;

            var cy = Math.cos(cx);

            var y = -cy*100;

            ctx.lineTo(x,y);

        }

        ctx.stroke();   //描边

    }

    function draw(){

        ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.save();

        ctx.shadowColor='rgba(0,0,0,0.8)';

        ctx.shadowOffsetX=12;

        ctx.shadowOffsetY=12;

        ctx.shadowBlur=15;

        drawAxis();

        drawCos();

        ctx.restore();

    }

    ctx.fillStyle='rgba(100,140,230,0.5)';

    ctx.strokeStyle='rgba(33,33,33,1)';

    draw();

/script

/body

/html

代码附上，妥妥的~

html怎么用js特效做折线图？

使用原生js自己写或js库（框架）都是可以的，由于目前HTML5并不是所有的浏览器都完美支持，使用兼容性比较好的js库是个不错的选择。

例如Highcharts图标库就可以实现各类曲线图、折线图、区域图、3D图、柱状图等等。具体使用参考：。

Highcharts中做折线图的demo代码可以作为参考：

html lang="en"

head

script type="text/javascript" src=""

/script

script type="text/javascript" src=""

/script

script type="text/javascript" src=""

/script

script

$(function () {

$('#container').highcharts({

chart: {

type: 'line'

},

title: {

text: 'Monthly Average Temperature'

},

ubtitle: {

text: 'Source: WorldClimate.com'

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Temperature (°C)'

}

},

tooltip: {

enabled: false,

formatter: function() {

return 'b'+ this.series.name +'/bbr/'+this.x +': '+ this.y +'°C';

}

},

plotOptions: {

line: {

dataLabels: {

enabled: true},

enableMouseTracking: false

}

},

series: [{

name: 'Tokyo',

data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

}, {

name: 'London',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

});

});

/script

/head

body

div id="container" style="min-width:700px;height:400px"/div

/body

/html

html中如何用js实现提交表单

办法1.同一个页面中建立两个表单 各自提交：

form action="?" name="form1" id="form1"

!-- 表单内容 --

input type="submit" /

/form

form action="?" name="form1" id="form1"

!-- 表单内容 --

input type="submit"  /

/form

办法2：如果非要只有一个表单的话，通过js提交：

script type="text/javascript" language="javascript"

function submitYouFrom(path){

$('form1').action=path;

$('form1').submit();

}

/script

form action="?" name="form1" id="form1"

!-- 表单内容 --

input type="button" value="提交1" onclick="submitYouFrom('地址一')"/

input type="button" value="提交2" onclick="submitYouFrom('地址二')"/

/form

html里怎么做动态的曲线图呢？如截图

H5里面做动态曲线的话一般是用SVG图形+动画来做，但是如果你是用工具的话可以直接把在设计软件中做好的SVG图形，代码复制到H5工具，然后加SVG动画就可以了。

网页曲线图代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于曲线图数据、网页曲线图代码的信息别忘了在本站进行查找喔。