jqchart 使用的几点小技巧

官网demo地址：http://www.jqchart.com/jquery/chart

 

由于demo不能完全满足我的需求，所以做了以下改动。

需求1：需要数据曲线从左到右实时的更新

        在jqchart 初始化的时候，给series 中需要变化的曲线的data用一个数组来代替，上代码：

 

 series:[
                            {
                            	title: '动态数据',
                                type: 'line',
                                data: mydata,//外部定义的数组
                                markers: null,//不用圆点标示
                                strokeStyle: 'green'
                            }
                ]

 其中，mydata 是外面定义的一个js数组，那么如何实现曲线往右不断延伸呢，那么需要不断的往数组里添加数据，并更新 jqchart，上代码：

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++;
        }

 

需求2：需要动态的增加曲线和取消曲线在界面上的显示

       由于demo中给的例子动态增加到是实现了，但是取消的话只给出了取消最后一条曲线的例子，不能取消指定的曲线，所以我在实现的时候，给要增加和删除的曲线预留了位置。上代码：

series:[
                            {
                            	title: '数据1',
                                type: 'line',
                                data: data,
                                markers: null,//拐点不用圆点标示
                                strokeStyle: '#000000'
                            },
                            null,//预留位置
                            {
                            	title: '动态数据',
                                type: 'line',
                                data: mydata,
                                markers: null,//不用圆点标示
                                strokeStyle: 'green'
                            }
]

 增加曲线：

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');

 删除曲线：

// get current series
var series = $('#jqChart').jqChart('option', 'series');
					
series[1]=null;//把预留位置的data置空
$('#jqChart').jqChart('update');//更新jqchart