highCharts的开发应用
highCharts是用来做图标的插件，基于jquery
效果图如下：
加载数据方式1如下
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX异步请求数据</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/modules/exporting.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/themes/dark-unica.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script type="text/javascript">
$(function () {
//异步加载数据第一种方式
var options={
chart:{
renderTo:'container',//报表显示在页面位置 container 为div定义的属性（id）
type:'line',//line column
//定义报表类型 例如line（直线图）， pie （饼图）， spline （曲线图）， column（柱状图），area （面积图）,scatter(点)
},
title:{
text:'书籍销量季度报表'
},
xAxis: {//x坐标要显示的数据
categories: ['1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
title: {
text: '数量 (本)'
},
plotLines: [{//表示为定义曲线报表中的（刻度线）或者叫做（定义的区间范围）
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {//表示为鼠标放在报表图中数据点上显示的数据信息
valueSuffix: '本'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
Loading:{
hideDuration: 1000,//淡出效果的持续时间（以毫秒为单位）
showDuration: 1000,//淡入效果的持续时间（以毫秒为单位）
labelStyle: {//加载标签的span的CSS样式
fontStyle: 'italic',
color:'red',
fontSize:"40px"
},
style: {//覆盖在绘图区的加载页面的样式
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center',
color:'red'
}
},
series: [{},{},{}]//决定有多少条数据
}
var ctx = "${pageContext.request.contextPath}";
var url = ctx + '/nodeAction.action?methodName=ListView';
//var url = "data.json"
$.getJSON(url,function(data) {
var i,len=data.length;
//console.log(data[0].name);
for( i=0;i<len;i++){
//赋值 series
options.series[i].data = data[i].arc;
options.series[i].name = data[i].name;
console.log(options.series[i].data);
//对报表X轴显示名称赋值
//options.xAxis.categories[i]=data[i].month;//可在json数据中添加月份添加
}
var chart = new Highcharts.Chart(options);
});
});
</script>
</body>
</html>
加载数据方式2如下
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX异步请求数据</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/modules/exporting.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/themes/dark-unica.js"></script>
</head>
<body>
<!--[if lt IE 10]>
<div class="browserupgrade">
在线编辑代码s 目前只支持 IE10 以上的浏览器，为了更好的体验，建议使用谷歌、火狐、IE10+ 等主流浏览器访问本站！
</div>
<![endif]-->
<div id="container" style="min-width:400px;height:400px"></div>
<script type="text/javascript">
$(function () {
// 异步加载数据第二种方式
var options={
chart:{
renderTo:'container',
type:'line'//line column
},
title:{
text:'异步获取数据'
},
subtitle: {
text: '折线图',
x: -20
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
title: {
text: '温度 (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
Loading:{
hideDuration: 1000,//淡出效果的持续时间（以毫秒为单位）
showDuration: 1000,//淡入效果的持续时间（以毫秒为单位）
labelStyle: {//加载标签的span的CSS样式
fontStyle: 'italic',
color:'red',
fontSize:"40px"
},
style: {//覆盖在绘图区的加载页面的样式
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center',
color:'red'
}
},
credits: {
enabled: false
},
series: []
}
var oChart = null;
oChart = new Highcharts.Chart(options);
var ctx = "${pageContext.request.contextPath}";
var url = ctx + '/nodeAction.action?methodName=ListView';
loadData();
function loadData(){
oChart.showLoading("Loading...."); //显示加载
$.ajax({
url : url,
type : 'POST',
dataType : 'json',
success : function(Data){
console.log(Data);
for(i=0; i<Data.length;i++){
var DataSeries = {
name: Data[i].name,
data: Data[i].arc
};
oChart.addSeries(DataSeries);
}
oChart.hideLoading("Loading....");//隐藏加载
}
});
}
});
</script>
</body>
</html>