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