您的位置:首页 > 其它

Highcharts动态画曲线

2015-07-31 10:46 281 查看
  使用Highcharts画曲线的过程中,有时候曲线个数是从数据库中取出来的,不能确定曲线的条数。

  可以利用Highcharts里的addSeries函数进行动态添加曲线:

  示例如下:

for(var i=0;i<=<%=intRet %>;i++){
var chart = $('#container').highcharts();

newstr=strArray.pop();

tempArray = newstr.split('a');
//用于剔出空值与0值
var isNum=false;
//字符串存放到数字数组中
for (var j = 1; j < tempArray.length-1;j++) {
numArray[j-1] = parseFloat(tempArray[j]);
if ((!isNaN(numArray[j-1]))&&numArray[j-1]!=0) {
isNum=true;

}
}
if(isNum){
//向highcharts中画线
chart.addSeries({
data: numArray,
name:curveNameArray[i],
pointStart: Date.UTC(year, month, datetime,00,00),
pointInterval: 5 * 60 * 1000
});
}else{
//向highcharts中画线
chart.addSeries({
data: null,
name:curveNameArray[i],
pointStart: Date.UTC(year, month, datetime,00,00),
pointInterval: 5 * 60 * 1000
});
}
}


View Code
  示例中,曲线的条数是不确定的,利用一个for循环向chart中添加曲线:

  chart.addSeries({
    data: numArray,
    name:curveNameArray[i],
    pointStart: Date.UTC(year, month, datetime,00,00),
    pointInterval: 5 * 60 * 1000
   });

  这里需要注意的是,给data赋值的数组不能是字符串,需要进行转换。

  去除曲线上点的方法是设置marker 里的enabled为false

  plotOptions: {
  spline: {
  marker: {
    enabled: false
      }
    }

  },

    效果如下:
  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: