正文
html5曲线图,曲线图设计
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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'
},
subtitle: {
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
相关问答
Q1: 如何使用html5的canvas 做一个曲线图 请附小例子
script代码
var g=canvas.getContext("2d");
g.beginPath();
g.strokeStyle="#F00";
g.moveTo(0,0);
g.bezierCurveTo(300,0, 0,300, 200,200);
g.stroke();
Q2: HTML5中如何绘制图表？
图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。
!DOCTYPE html
html
head
meta charset="utf-8"
title绘制图表/title
/head
body
div id="result-stub" class="well hidden"
canvas id="canvas" width="345" height="345"
p你的浏览器不支持canvas元素/p
/canvas
/div
script
// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。
var
canvas = document.getElementById('canvas'),
context = null;
context = canvas.getContext('2d');
var img = new Image();
img.src ='chart-background.png';//这里是一张具有图表背景的图片
// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。
img.onload = function() {
//绘制图片
context.drawImage(img, 0, 0);
//绘制直线
context.beginPath();
context.moveTo(70, 105);
context.lineTo(105, 132);
context.lineTo(142, 250);
context.lineTo(176, 175);
context.lineTo(212, 145);
context.lineTo(245, 197);
context.lineTo(280, 90);
context.stroke();
}
/script
script src="jquery.js"/script
/body
/html
3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。
Q3: HTML5 Canvas曲线图的Y轴坐标最小值如何设置为0
!DOCTYPE html
html
head
titleCos演示/title
meta charset='utf-8'
/head
body style='a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dhmynLuj0vuH01rj9-rjI90ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHT4PH6kPjcsrHf3Pj0LPHcvPs" target="_blank" class="baidu-highlight"text-align/a: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
