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