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- 阅读( ...) 评论( ...) 编辑 收藏