Echarts/highcharts:圖表庫的模型框架---pie/bar折線圖
阿新 • • 發佈:2018-11-30
1.匯入 Echarts/highcharts資原始檔
2.在html中準備一個層
<div id="container" style="min-width:700px;height:400px"></div>
3. 找到折線圖的靜態程式碼
<script type="text/javascript"> $(function () { $('#container').highcharts({ title: { text: 'cn年度銷售報表', x: -20 //center }, subtitle: { text: 'Source: cn.mysql', x: -20 }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { title: { text: '萬($)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '萬($)' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'cn', data: [29.9, 71.5, 36.4, 49.2, 14.0, 16.0, 15.6, 28.5, 26.4, 14.1, 95.6, 54.4] }] }); }); </script>
將如上copy至html
4.執行。
即可看到折線圖的效果。
當然,僅僅是這樣,仍然是不夠的。
下面,動態載入從資料庫中拿取的資料。
<script type="text/javascript"> $.post('bar.action', function (result) { $('#container').highcharts({ series: [{ name: 'cn', data: result.value }] }); }, 'json') </script>
如上,即可將Ajax載入的資料放到折線圖中展示。
@ResponseBody @RequestMapping("bar") public Map<String, Object> bar() { Map<String, Object> map = new HashMap<>(); double[] values = {23, 13.9, 13.1, 12, 24.3, 43.3, 45, 23.9, 33.3, 25, 26.9, 10}; map.put("value", values); return map; }
這是SpringMVC模式下產生的格式資料
當然,values可以是從資料庫裡查出的list
high:
<div align="center">
<div id="container" style="width: 800px; height: 500px;"></div>
</div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '全球各大洲人口增長曆史及預測'
},
subtitle: {
text: '資料來源: 世界國聯'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: '十億'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' 百萬'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: '亞洲',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: '非洲',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: '歐洲',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: '美洲',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: '大洋洲',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
</script>
靜態的圖表,資料格式相差無幾。
pie:
<script type="text/javascript">
// 繪製圖表
var myChart = echarts.init(document.getElementById('pie'));
myChart.setOption({
title:{
text:'神天股東分紅表'
},
tooltip : {
show : 'true'
},
series : [{
type: 'pie',
data:[
]
}
]
})
</script>
<script type="text/javascript">
$(function() {
$.post(
'pie.do',
function(result){
myChart.setOption( {
series : {
data : result
}
});
},'json'
)
})
</script>
這是pie餅圖
JSONArray json=new JSONArray();
List<User> list=DataDao.queryAllUser();
for (User user : list) {
JSONObject obj=new JSONObject();
obj.put("value",user.getUmoney());
obj.put("name", user.getUname());
json.add(obj);
}
// int[] in={11, -2, 93, 13, 35};
// String[] str={"³ÄÉÀ", "ÑòëÉÀ", "Ñ©·ÄÉÀ", "¿ã×Ó", "¸ß¸úЬ"};
// for(int i=0;i<in.length;i++){
// JSONObject obj=new JSONObject();
// obj.put("value",in[i]);
// obj.put("name", str[i]);
// json.add(obj);
// }
resp.setContentType("text/plain;charset=utf-8");
PrintWriter out=resp.getWriter();
out.print(json.toJSONString());
這是轉發fastjson封裝的json、
後面會有更高階的轉發方式