Highcharts动态取值,刷新数据的解决方案

今天做项目在Highcharts刷新死活找不到有效的解决方案,只能自己研究了,查看API之后,经过N次测试,终于通过了,先将代码贡献出来,帮助大家解决类似问题

for(var j=0;j<cate.length;j++){
     chart.xAxis[0].categories.push(cate[j]);
}
chart.series[0].setData(inc);
chart.redraw(false);

这是ajax中的success回调函数,变量cate存放的是要更新的x轴分组,是一个一维数组,类似于这个结构:

['分类1','分类2','分类3','分类N',];

由于xAxis属性下的categories属性是个数组,目前只能通过push的方法注入值,直接将数组赋值给categories事不行的,不知道为什么,API上貌似没有这个说明。

chart.series[0].setData(inc);
这句话是将封装好的数据set进图表中,data类型有多种格式,具体格式可以参照API,在后台将你选用的格式封装好,传回在前台转换为对应的JSON或者Array即可,不过有一点是要注意的,如果data选用的是一维数组形式,后台传回的String在前台封装成JS数组时,一般选用split方法,但是直接转换之后不能用,

原因是因为split转换之后是这个形式:

['数据1','数据2','数据N']
但是我们需要的是这种:

[数据1,数据2,数据N]
看出差异来了吧?就是分号,如果有分号,highcharts就不认识了,目前我想到的解决办法就是遍历数组,转换为Number型在放回去。。。

以下是我定义chart的代码

chart = new Highcharts.Chart({
    	chart: {
			renderTo: 'container-company',
			type: 'column',
			margin: 75,
			options3d: {
				enabled: true,
				alpha: 15,
				beta: 15,
				depth: 50,
				viewDistance: 25
			}
		},
		title:{
			text: '公司收入'
		},
		plotOptions:{
			column: {
				depth: 25
			}
		},
		credits:{
        	enabled:false
		},
		tooltip: {
        	formatter: function() {
            	//当鼠标悬置数据点时的格式化提示
            	return '收入:' + Highcharts.numberFormat(this.y, 1)+'<br/>';
            }
        },
		xAxis:{
			labels: {
                rotation: -45  
            },
            categories:[]
        },
		yAxis:{
			title:{
				enabled: true,
                text: '收入(单位:元/人民币)'
        	}
		},
		series:[{}]
    });

最终的实现效果是这样的





根据选择的条件不同,会返回不同的数据,若只选择年,则返回每个月的数据,若选择年月,则返回每天的具体收入。

后台代码过多,我就不放上来了,感兴趣的朋友可以留言,我会把实现的源代码发给你,大家一起研究

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 31
    评论
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值