官网demo地址:http://www.jqchart.com/jquery/chart
简单示例:
[javascript]
$('#jqChart').jqChart({
title: 'jqChart - Teststation',
legend: { title: 'Legend' },
border: { strokeStyle: '#6ba851' },
background: background,
axes: [{
type: 'linear',
location: 'left'
},
{
type: 'dateTime',
location: 'bottom',
labels: {
stringFormat: 'dd-mm-yyyy'
}
}
],
series: [
{
type: 'line',
lineWidth: 1,
title: 'Random Data',
markers: {
size: 0
},
data: data
}
]
});
[/javascript]
由于demo不能完全满足我的需求,所以做了以下改动。
需求1:需要数据曲线从左到右实时的更新
在jqchart 初始化的时候,给series 中需要变化的曲线的data用一个数组来代替,上代码:
[javascript]
series:[
{
title: '动态数据',
type: 'line',
data: mydata,//外部定义的数组
markers: null,//不用圆点标示
strokeStyle: 'green'
}
]
[/javascript]
其中,mydata 是外面定义的一个js数组,那么如何实现曲线往右不断延伸呢,那么需要不断的往数组里添加数据,并更新 jqchart,上代码:
[javascript]
var mydata = [];
var myValue = 100;
var j=0;;
function updateChart() {
myValue += Math.random() * 10 - 5;
if(j<60){
mydata.push([j,round(myValue)]);
$('#jqChart').jqChart('update');//刷新jqchart
setTimeout("updateChart()", 1000);
}
j++;
}
[/javascript]
需求2:需要动态的增加曲线和取消曲线在界面上的显示
由于demo中给的例子动态增加到是实现了,但是取消的话只给出了取消最后一条曲线的例子,不能取消指定的曲线,所以我在实现的时候,给要增加和删除的曲线预留了位置。上代码:
[javascript]
series:[
{
title: '数据1',
type: 'line',
data: data,
markers: null,//拐点不用圆点标示
strokeStyle: '#000000'
},
null,//预留位置
{
title: '动态数据',
type: 'line',
data: mydata,
markers: null,//不用圆点标示
strokeStyle: 'green'
}
]
[/javascript]
增加曲线:
[javascript]
var series = $('#jqChart').jqChart('option', 'series');
newSeries2 = {
title:'数据4',
type: 'line',
data: getRandomData(),
markers:null,
strokeStyle:'red'
};
// get the data from the first series
series[1]=newSeries2;//给之前的预留位置赋值
$('#jqChart').jqChart('update');
[/javascript]
删除曲线:
[javascript]
// get current series
var series = $('#jqChart').jqChart('option', 'series');
series[1]=null;//把预留位置的data置空
$('#jqChart').jqChart('update');//更新jqchart
[/javascript]
jqchart 使用的几点小技巧
- 推荐文章
- 单位冲击响应与频响以及FIR实现代码(C语言)(转)
- 英文中电话号码的正确写法
- 如何用英语表达日期
- 计算机IP地址与子网掩码如何进行AND运算
- 关于IP选项
- 以太网数据包、IP包、TCP/UDP 包的结构(转)
- IP头结构详解(转)
- IP头,TCP头,UDP头,MAC帧头定义(转)
- 歪国人DIY的MINI四轴
- 《机器学习实战》基于朴素贝叶斯分类算法构建文本分类器的Python实现
- 要如何努力,才干成为非常厉害的人?!
- Fragment 实现的 分类 效果
- sql 高性能存储过程分页
- 手机那些事
- 火车上的回顾--一个程序猿的成长史(6)
- 基于Eclipse的Android JNI层測试应用开发过程记录
- Python基础教程之第1章 基础知识
- leetcode:Reverse Nodes in k-Group
- 最大堆及其操作函数
- 扩展欧几里德 poj1061 青蛙的约会
- 人生中第一份值得纪念的工作
- ZOJ 3829 Known Notation(字符串处理 数学 牡丹江现场赛)
- java基础之内部类
- 从计算的本质到编程语言
- 【Cocos2dx】资源目录,播放背景音乐,导入外部库
- POJ 3723 Tree(树链剖分)
- hdu 1002 A + B Problem II(大正整数相加)
- 时间格式字符串转化为date和时间戳
- 深入浅出游戏算法(4)-unity3d算法(1)-球转动
- GeoServer手动发布本地Shapefile地图