highcharts的使用

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。（来自百度百科）

例如：

实际使用时，可以参照相关API选择适合于自己的图表，此处主要对折线图中自定义“点的描述”进行突出，此处为一个小难点。

html页面，注意其id值：

<div class="c_r fr">
                  <div class="g_one g_tp">
                      <h3>近7天电商参与统计</h3>
                          <select id="by_bkConsume_Ranking"  style="width:130px"  class="summary_select box box3">
	            	 		<option value="F${sessionScope.NMS_SESSION_DEFFAULT_UNIT.id}">全府</option>
	            	 	  </select>
	            	    <div class="Contentbox" style="float:left;margin-left:20px;">
                       		<div id="bkRecord"  style="padding-top:15px;"></div>
                       </div>
                      <div class="clear"></div>
                  </div>
              </div>

前端JS代码：

getBKConsumeRankingByBf("F");

function getBKConsumeRankingByBf(id){
	$.utouuAjax({
		useLoading:true,
		loadingParent:"#bkRecord",
		url:"unit/get-BKConsumeRankingByBf",
		data:{id:id},
		type:"post",
		dataType: 'json',
		success:function(data){
			if(data.success){
				data = data;
				$('#bkRecord').highcharts({
			        colors:["#ff3366"],
			        chart: {
			            type: 'line',
			            width:450,
			            height:300
			        },
			        title: {
			            text:false
			        },
			        xAxis: {
			            categories: data.sevenDays.dateList,
			            gridLineWidth: 1,
			            gridLineDashStyle:"Dash",
			            tickWidth : false
			        },
			         yAxis: {  
			            title: {
			                    text: false
			                },      
			            labels: {
			                formatter:function(){
			                  if(this.value <=100) { 
			                    return this.value;
			                  }else if(this.value >100 && this.value <=200) { 
			                    return this.value; 
			                  }else { 
			                    return this.value;
			                  }
			                }
			              },
			            min:0,
			            allowDecimals:false
			        }, 
			        exporting :{
			            enabled:false
			        },
			        plotOptions: {
			            line: {
			                marker: {
			                    lineWidth: 2,
			                    lineColor: "#ff3366",
			                    fillColor: 'white'
			                }
			            }
			        },
			        credits:{
			            enabled:false
			        },
			        legend: {
			            enabled:true
			        },
			        tooltip: {
			            shared: true,
			            formatter:function(){
			            	var arr =[];
			            	var content ;
			            	arr = data.sevenDays.taxList;
			            	return '日期 ：<b>' + this.x + '</b>'+
			            			'<br/>'+this.points[0].point.series.name+' : <b>'+this.points[0].point.y + '</b>'+
			            			'<br/>糖赋 : <b>' + arr[this.points[0].point.x] + '</b>';
			            },
			            valueDecimals: 2
			        },
			         series: [{
			            name: '人数',
			            data: data.sevenDays.numList
			        }]
			    });
			}
			}});
}

后端Java代码：

/**
	 * 近七天电商参与统计
	 * @since 1.1
	 * @param request r
	 * @return
	 * <br><b>作者： @author tengxiang</b>
	 * <br>创建时间：2016年4月19日 上午10:26:55
	 */
	@ResponseBody
	@RequestMapping(value = "/get-BKConsumeRankingByBf")
	public JSONObject BKConsumeRankingByBf(HttpServletRequest request) {
		JSONObject json = new JSONObject();
		JSONObject data = new JSONObject();
		json.put("success", false);
		HttpSession session = request.getSession();
		Long unitId = null;
		if (session.getAttribute(Constants.NMS_SESSION_DEFFAULT_UNIT) == null) {
			throw new BusinessException("非法请求！");
		}
		
		int day = DateUtils.formatYYYYMMDD(new Date());
		String id = request.getParameter("id");
		String bkConsumeRankingByBf = "";
		if(StringUtils.isNotBlank(id) && id.startsWith("C")){ //以C开头即为百夫长id，由百夫长id查询
			String bfzId = id.substring(1);
			String key = MemcacheKeys.BFZ_BKCONSUME_RECORD_BFZ_+day+"_"+bfzId;
			Object o = memcachedClient.get(key);
			if (o != null) {
				data = (JSONObject) o;
			}else {
				//获取消费七天数据统计
				bkConsumeRankingByBf = bestkeepService.getBKConsumeRankingByBf(null, Long.valueOf(bfzId), null, null);
				data = unitService.getBKConsumeRankingByUnit(bkConsumeRankingByBf);
				memcachedClient.set(key, MemcacheKeys.MEM_CACHE_TIME_ONE_DAY, data);
				}
		}else{	//由府id查询
			UnitDto u = (UnitDto) session.getAttribute(Constants.NMS_SESSION_DEFFAULT_UNIT);
			unitId = u.getId();
			String key = MemcacheKeys.F_BKCONSUME_RECORD_UNIT_+day+"_"+unitId;
			Object o = memcachedClient.get(key);
			if (o != null) {
				data = (JSONObject) o;
			}else {
				//获取消费七天数据统计
				bkConsumeRankingByBf = bestkeepService.getBKConsumeRankingByBf(unitId, null, null, null);
				data = unitService.getBKConsumeRankingByUnit(bkConsumeRankingByBf);
				memcachedClient.set(key, MemcacheKeys.MEM_CACHE_TIME_ONE_DAY, data);
			}
		}
		json.put("sevenDays", data);
		json.put("success", true);
		return json;
	}

在JS中如何获取一个obj的所有属性，以便我们进行操作？

ob=eval(obj);
    			var Property="";
    			for(var i in ob){
    			Property+="属性："+i+"<br/>";</span><span style="font-size:18px;">

其他部分JS常用功能整理：

1、防止重复提交：

<a id="pay_btn" flag="1" class="warp_pay_btn">立即支付</a>

	//付款
	$("#pay_btn").click(function(){
		var id=$("#sub_id").val();
		var flag = $(this).attr("flag");
		if(flag == 0){
			return false;
		}
		$(this).html("正在支付...").attr("disabled",true);
		$(this).attr("flag","0");
...
});

2、判断是否为正整数：

function isDigit(str) {
    var g = /^[1-9]*[1-9][0-9]*$/;
    return g.test(str);
}