Highcharts饼状图Ajax动态赋值的问题

这种饼状图是动态的当鼠标放上面那一部分会突出的

Highcharts下载：点击下载

Highcharts-zh_CN.js下载：点击下载

效果图：

前台js代码：

控制层代码：

        /**
	 * 根据时间获取订单物料名称数量所占%比
	 */
	@RequestMapping(value="/getOrder")
	@ResponseBody
	public String getOrder() throws Exception{ 
			PageData pd = new PageData();
			pd = this.getPageData();
			if(getUser().getRole().getROLE_NAME().contains("供应商")){
				pd.put("USERNAME", getUserName());
				pd=provideinfoService.findByUserName(pd);
				pd.put("CREATE_BY", pd.get("CREATE_BY").toString());
			}else if(!"admin".equals(getUserName()) && !getUser().getRole().getROLE_NAME().contains("主管")){
				pd.put("CREATE_BY", getUserName());
			}
			JSONObject json=new JSONObject();
			JSONArray result = new JSONArray();
			List	varList = stockorderdetailsService.chartsOrder(pd);
			for (PageData p : varList) {
				json.put("name", p.get("MAT_NAME").toString());
				json.put("y", p.get("PERCENT").toString());
				result.add(json);
			}
			logger.info(result.toString());
			return result.toString();
	}
	/**
	 * 根据时间获取退货订单物料所占百分比
	 */
	@RequestMapping(value="/getData")
	@ResponseBody
	public Map getData(Page page){
		logBefore(logger, "列表recharts");
		Map map = new HashMap();
		try{
			PageData pd = new PageData();
			pd = this.getPageData();
			if(getUser().getRole().getROLE_NAME().contains("供应商")){
				pd.put("USERNAME", getUserName());
				pd=provideinfoService.findByUserName(pd);
				pd.put("CREATE_BY", pd.get("CREATE_BY").toString());
			}else if(!"admin".equals(getUserName()) && !getUser().getRole().getROLE_NAME().contains("主管")){
				pd.put("CREATE_BY", getUserName());
			}
			List	varList = recededetailsService.rechartsData(pd);
			map.put("varList", varList);
		} catch(Exception e){
			logger.error(e.toString(), e);
		}
		return map;
	}

其中用到两种传值方式一种JSON另一种用Map传值给Ajax，下面为取到的值。

[{"name":"插头","y":"0.0164"},{"name":"石膏材料","y":"0.1639"},{"name":"质材","y":"0.8197"}]

两个饼状图并列展示前台代码：

给饼状图赋值主要就是取json拼接成

series: [{
		type: 'pie',
		name: '浏览器访问量占比',
		data: [[{name: 'Chrome',y: 12.8}],[{name: 'Chrome',y: 12.8}]]

        }]

data:[[name,y],[name,y]]这样的数组

注意y后面的数值为数字不是字符串所以我用JSONArray传值需要转化将字符串转化为数字

success:function(data){
	$(data).each(function(i,item){
	    arr.push([item.name,Number(item.y)]);
	 }); 
}

标题样式设置加粗设置字体颜色大小

title: {
	text: '订单物料数量占比',
	style:{
	    color: '#3E576F',
            fontSize: '25px',
	    fontWeight: 'bold'
	 }
}

饼状图添加颜色图例如下图所示即可

plotOptions: {
		pie: {
		    allowPointSelect: true,
		    cursor: 'pointer',
		    dataLabels: {
		        enabled: true,
		        format: '{point.name}: {point.percentage:.1f} %',
		        style: {
		            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
		        }
		    },
		    showInLegend: true ,
		}
},

 showInLegend: true