html图表实现,用 Flotr2 实现的 HTML5 图表

最新推荐文章于 2021-09-07 21:59:15 发布

天使走自己的路

最新推荐文章于 2021-09-07 21:59:15 发布

阅读量135

点赞数

文章标签： html图表实现

本文介绍了如何使用Flotr2库在HTML5中创建动态图表，演示了如何通过JavaScript实现sin函数和sin(1/x)的交替显示，并提供了详细的代码示例。读者将学习到如何调整图表模式、动画效果和数据绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.[图片] 未命名.jpg

2. [代码][HTML]代码

用 Flotr2 实现的 HTML5 图表

/* page layout styles */

margin:0;

padding:0;

}

header a.stuts,a.stuts:visited{

border:none;

text-decoration:none;

color:#fcfcfc;

font-size:14px;

left:50%;

line-height:31px;

margin:23px 0 0 110px;

position:absolute;

top:0;

}

header .stuts span {

font-size:22px;

font-weight:bold;

margin-left:5px;

}

.container {

color: #000;

margin: 20px auto;

overflow: hidden;

position: relative;

width: 600px;

height: 400px;

}

.controls {

border: 1px dashed gray;

color: #000;

margin: 20px auto;

padding: 25px;

position: relative;

width: 550px;

}

.controls p {

margin-bottom: 10px;

}

.controls input {

margin-left: 10px;

}

使用Flotr2实现的HTML5图表效果

源码地址：http://www.script-tutorials.com/html5-charts-and-graphs/

函数:

sin

sin(1/x)

视觉模式:

3. [代码][JavaScript]代码

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

var start = (new Date).getTime();

var data, graph, offset, i;

var mode = 1;

var fmode = 1; // 1- basic sin, 2 - sin(1/x)

// toggle mode

function toggleMode(i) {

mode = i;

}

// toggle func

function toggleFunc(i) {

fmode = i;

}

// Draw a sine curve at time t

function animateSine (t) {

data = [];

data2 = [];

// little offset between steps

offset = 2 * Math.PI * (t - start) / 10000;

http://www.enterdesk.com/special/meitu/

if (fmode == 2 && offset > 15) {

start = t;

美图

}

for (i = 0; i < 4 * Math.PI; i += 0.2) {

if (fmode == 1) {

data.push([i, Math.sin(i - offset)]);

data2.push([i, Math.sin(i*2 - offset)]);

} else if (fmode == 2) {

data.push([i, Math.sin(1/(i-offset))]);

// data2.push([i, Math.sin(1/(i*2-offset))]);

}

// prepare properties

var properties;

switch (mode) {

case 1:

properties = {

yaxis : {

max : 2,

min : -2

}

};

break;

case 2:

properties = {

yaxis : {

max : 2,

min : -2

bars: {

show: true,

horizontal: false,

shadowSize: 0,

barWidth: 0.5

}

};

break;

case 3:

properties = {

yaxis : {

max : 2,

min : -2

radar: {

show: true

grid: {

circular: true,

minorHorizontalLines: true

}

};

break;

case 4:

properties = {

yaxis : {

max : 2,

min : -2

bubbles: {

show: true,

baseRadius: 5

};

break;

}

// draw graph

if (fmode == 1) {

graph = Flotr.draw(container, [ data, data2 ], properties);

} else if (fmode == 2) {

graph = Flotr.draw(container, [ data ], properties);

}

// main loop

setTimeout(function () {

animateSine((new Date).getTime());

}, 50);

}

animateSine(start);