highcharts的使用

来源：互联网发布：华道数据有限公司编辑：程序博客网时间：2024/06/16 21:16

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

0 0