jqchart 使用的几点小技巧

官网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]

posted @ 2013-06-29 15:45 Leone- 阅读(...) 评论(...) 编辑 收藏