Highcharts餅狀圖Ajax動態賦值的問題
這種餅狀圖是動態的當滑鼠放上面那一部分會突出的
Highcharts下載：點選下載
Highcharts-zh_CN.js下載：點選下載
效果圖：
前臺js程式碼：
<script type="text/javascript">
var arr = [];
function getOrder(){
arr = [];
var BEGIN_TIME = $("#BEGIN_TIME").val();
var END_TIME = $("#END_TIME").val();
$.ajax({
async:false,
type:'post',
url:'<%=basePath%>getOrder.do',
data:{"BEGIN_TIME":BEGIN_TIME,"END_TIME":END_TIME},
dataType:"json",
success:function(data){
$(data).each(function(i,item){
arr.push([item.name,Number(item.y)]);
});
}
})
}
var arr2 = [];
function getData(){
arr2 = [];
var BEGIN_TIME = $("#BEGIN_TIME").val();
var END_TIME = $("#END_TIME").val();
$.ajax({
async:false,
type:'post',
url:'<%=basePath%>getData.do',
data:{"BEGIN_TIME":BEGIN_TIME,"END_TIME":END_TIME},
dataType:"json",
success:function(data){
$(data.varList).each(function(index,item){
arr2.push([item.MAT_NAME,item.TOTAL]);
});
}
})
}
function showCharts() {
Highcharts.setOptions({
colors: [ '#6AF9C4','#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#058DC7','#64E572', '#FF9655',
'#FFF263']
});
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '訂單物料數量佔比',
style:{
color: '#3E576F',
fontSize: '25px',
fontWeight: 'bold'
}
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
}
},
showInLegend: true ,
states: {
hover: {
enabled: false
}
},
slicedOffset: 20, // 突出間距
point: { // 每個扇區是資料點物件，所以事件應該寫在 point 下面
events: {
// 滑鼠滑過是，突出當前扇區
mouseOver: function() {
this.slice();
},
// 滑鼠移出時，收回突出顯示
mouseOut: function() {
this.slice();
},
// 預設是點選突出，這裡遮蔽掉
click: function() {
return false;
}
}
}
}
},
series: [{
size:'100%',
type: 'pie',
name: '訂單物料名稱數量佔比',
data: arr
}]
});
}
function showCharts2() {
Highcharts.setOptions({
colors: [ '#DDDF00', '#24CBE5','#50B432', '#ED561B', '#058DC7','#64E572', '#FF9655',
'#FFF263']
});
chart = Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '退貨訂單物料數量佔比',
style:{
fontSize: '25px',
fontWeight: 'bold'
}
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
}
},
showInLegend: true ,
states: {
hover: {
enabled: false
}
},
slicedOffset: 20, // 突出間距
point: { // 每個扇區是資料點物件，所以事件應該寫在 point 下面
events: {
// 滑鼠滑過是，突出當前扇區
mouseOver: function() {
this.slice();
},
// 滑鼠移出時，收回突出顯示
mouseOut: function() {
this.slice();
},
// 預設是點選突出，這裡遮蔽掉
click: function() {
return false;
}
}
}
}
},
series: [{
size:'100%',
type: 'pie',
name: '退貨訂單物料名稱數量佔比',
data: arr2
}]
});
}
function clearTime() {
$("#BEGIN_TIME").val("");
$("#END_TIME").val("");
return false;
}
//檢索
function search() {
getOrder();
getData();
showCharts();
showCharts2();
}
$(function() {
$(top.hangge());
//日期框
$('.date-picker').datepicker();
getOrder();
getData();
showCharts();
showCharts2();
});
</script>控制層程式碼：
/** * 根據時間獲取訂單物料名稱數量所佔%比 */ @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<PageData> 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<String,Object> getData(Page page){ logBefore(logger, "列表recharts"); Map<String,Object> map = new HashMap<String,Object>(); 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<PageData> 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"}]兩個餅狀圖並列展示前臺程式碼：
<div class="container-fluid" id="main-container"> <div id="page-content" class="clearfix"> <div class="row-fluid" style="margin-top: 120px;"> <div class="row-fluid"> <div id="container" style="width:800px;height:400px;float: left;"></div> <div id="container2" style="width:800px;height:400px;float: left;"></div> </div> </div> </div> </div>
給餅狀圖賦值主要就是取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: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
}
},
showInLegend: true ,
}
}, showInLegend: true相關推薦
Highcharts餅狀圖Ajax動態賦值的問題
這種餅狀圖是動態的當滑鼠放上面那一部分會突出的Highcharts下載：點選下載Highcharts-zh_CN.js下載：點選下載效果圖：前臺js程式碼：<script type="text/javascript"> var arr = []; func
關於Highcharts餅狀（pie）圖AJAX動態賦值的問題
關於Highcharts的餅狀圖（pie）實現起來就比柱狀圖（column）實現起來方便可理解的多。 我先貼出最後效果圖，然後來說說我對餅圖的理解。 官方demo裡面寫的很清楚，series裡面是放資料。可以看出也是可以放入json字串，至於在前臺封裝還是後臺封裝，看需求
ajax動態賦值echarts（餅圖和柱形圖）
本文以柱形圖和餅形圖ajax動態賦值為例 一、餅形圖賦值步驟 （1）jsp頁面 <!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!
ajax動態賦值highcharts柱形圖
實現的效果為 1.jsp頁面 <!-- 引入highcharts官方js --> <script src="js/highcharts.js"></script> <script> $(function(){ //獲得h
ajax動態賦值Echarts地圖
最終地圖實現的效果圖如下 實現步驟 一、jsp頁面 <!--引入js --> <script src="js/echarts.js"></script> <script src="js/china.js"></sc
wpf 在echarts中使用餅狀圖動態獲取後臺資料！難點：data的值是{name:'',value:''} --婷婷小姐姐
之前一直以為要用map 或者arr在data中做迴圈操作，還使用了List<string> 將資料轉拼接成一個字串。當我用json資料返回的時候發現數據格式是不對的。引入樣式這些就不說了。直接進入主題1、在後臺獲取資料返回一個集合List1或者dataTable
使用ajax給頁面的多個下拉框動態賦值
一。前臺頁面 $.post("${ctx}/basedata/baseData.do?method=queryPlantUnitList",function(data){ var optionvalue=eval("("+data+")");
使用Highcharts結合PHP與Mysql生成餅狀圖
我們在做複雜的資料統計功能時會用到餅狀圖，餅狀圖用整個圓表示總體的數量或整體值1，用圓內各個扇形的大小表示各部分數量或該部分佔總體的百分比，它可以清晰直觀的表示各部分之間以及各部分與整體之間的數量關係。 本文將結合實際，使用PHP讀取Mysql資料表中的資料，並將獲取
bootstrap模態框動態賦值， ajax非同步請求資料後給id為queryInfo的模態框賦值並彈出模態框（JS）
//查詢單個 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : "POST",
Echart 餅狀圖，柱狀圖series.data資料動態設定
關於echart的餅狀圖的資料引數主要在option中設定，我們需要根據自己的要求來設定 legend.data ,series.data. 有時需要從資料庫中取得資料然後設定。因此就涉及動態設定引數的問題。 option = { title
echart餅狀圖、柱狀圖上顯示百分比、資料值
柱狀圖： echart 3.0寫法： series:[{ label: { normal: { show: true, position: 'inside', formatt
highcharts入門之Pie：如何讓Pie餅狀圖的圖例內顯示百分比（轉）
有很多人都在詢問如何在highcharts的pie 餅狀圖內顯示百分比，通過不斷琢磨最後得出了一個結論，只需要簡單配置即可實現這樣一個需求。 完整核心程式碼如下所示： $(function () { var chart; //
使用css3制作正方形、三角形、扇形和餅狀圖
radi spa over pointer tran ima 得到 lin 引入 1.利用邊框制作正方形 如果將盒容器的width和height設置為0，並為每條邊設置一個較粗的width值和彼此不同的顏色，最終會得到四個被拼接在一起三角形，它們分別指向不同的顏色。 htm
JavaScript+svg繪制的一個餅狀圖
圖例 n) attribute 數字類型 XML 用戶 h+ htm type svg參考：https://www.w3.org/TR/SVG/<body onload=‘document.body.appendChild( pieChart([12,23,34
PHP畫矩形，橢圓，圓，畫橢圓弧 ，餅狀圖
tro lips ade inpu 統計 起點 com eth func 1：畫矩形： imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $col ) imagere
柱形圖，餅狀圖JavaScript
column 註意 文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({
java代碼實現highchart與數據庫數據結合完整案例分析（一）---餅狀圖
隱藏 des log cred 數據庫數據 idt string 時間 input 作者原創：轉載請註明出處 在做項目的過程中，經常會用到統計數據，同時會用到highchart或echart進行數據展示，highchart是外國開發的數據統計圖插件， echa
Highcharts 樹狀圖(Treemap)
targe ora sco layout pps popu cab ons 配置 Highcharts 樹狀圖(Treemap) 樹狀圖 series 配置 設置 series 的 type 屬性為 treemap ，series.type 描
R圖表_餅狀圖
legend 之間 lock 圖標 圖片 explode nds percent 統計 R編程語言中有許多庫用來創建圖表。餅狀圖是以不同顏色的圓的切片表示的值。這些切片被標記，並且每個切片對應的數字也在圖表中表示。 在R中，使用將正數作為向量輸入的pie()函數創建餅狀圖。
第166天：canvas繪制餅狀圖動畫
padding new gree component adding 文本 add function 填充 canvas繪制餅狀圖動畫 1、HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head