利用Highcharts制作web图表学习（二）
最近中海油的项目需要用到图表展示数据，最近还是一直边学习边开发，今天做了一个展示，炼化厂加热炉效率展示的柱状图，把代码贴出来，大家指点一下互相学习，我是通过数组给Highcharts绑定的值，感觉这样做有点麻烦而且不灵活，大家有比较好的建议可以帮我看下，我引用了三个js，可以把本地的js注释掉用这些
<script type=
"
text/javascript
" src=
"
http://cdn.hcharts.cn/highcharts/highcharts.js
"></script>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/highcharts/exporting.js "></script>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js "></script>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/highcharts/exporting.js "></script>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js "></script>
exporting.js是用来将图表导出成你想要的格式。
源码如下：
<html xmlns=
"
http://www.w3.org/1999/xhtml
">
<head runat= " server ">
<title>加热炉效率柱状图</title>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js "></script>
<%--<script type= " text/javascript " src= " http://cdn.hcharts.cn/highcharts/highcharts.js "></script>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/highcharts/exporting.js "></script>--%>
<script src= " ../../js/jquery-1.8.3.min.js " type= " text/javascript "></script>
<script src= " ../../js/highcharts.js " type= " text/javascript "></script>
<script src= " ../../js/exporting.js " type= " text/javascript "></script>
<script type= " text/javascript ">
$(function () {
var data= new Array( 10);
var categories= new Array( 10);
var dataArr = $( " table :text ");
var cateArr =$( " table ").find( " span ");
for( var i= 0;i< 6;i++)
{
data[i]=parseFloat(dataArr[i].value);
categories[i]=cateArr[i].innerText;
}
var colors = Highcharts.getOptions().colors;
var data2 = [
{ ' color ': ' #F6BD0F ', ' y ':data[ 0]},
{ ' color ': ' #AFD8F8 ', ' y ':data[ 1]},
{ ' color ': ' #8BBA00 ', ' y ':data[ 2]},
{ ' color ': ' #F6BD0F ', ' y ':data[ 3]},
{ ' color ': ' #AFD8F8 ', ' y ':data[ 4]},
{ ' color ': ' #8BBA00 ', ' y ':data[ 5]}
{ ' color ': ' #FF8E46 ', ' y ':data[ 6]},
{ ' color ': ' #008E8E ', ' y ':data[ 7]},
{ ' color ': ' #D6468E ', ' y ':data[ 8]},
{ ' color ': ' #AFD8F8 ', ' y ':data[ 9]}
];
var chart = $( ' #container ').highcharts({
chart: {
type: ' column '
},
title: {
text: ' 本天效率最低的10个加热炉 ',
style:{
color: ' #3E576F ',
fontSize: ' 13px '
}
},
xAxis: {
categories:categories,
labels: {
// rotation: -45,
align: ' center ',
style: {
fontSize: ' 13px ',
fontFamily: ' Verdana, sans-serif '
}
}
},
yAxis: {
min: 80,
max: 100,
title: {
text: ' 加热炉效率 (%) '
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: ' 加热炉当天效率: <b>{point.y:.2f} %</b> ',
},
plotOptions:{
column:{
depth: 25
}
},
credits:{
enabled: false
},
series: [{
name: ' 加热炉效率 ',
data: data2,
dataLabels: {
// enabled: true,
// rotation: -90,
align: ' right ',
x: 4,
y: 10,
style: {
fontSize: ' 15px ',
fontFamily: ' Verdana, sans-serif ',
textShadow: ' 0 0 3px red '
}
}
}]
});
});
</script>
</head>
<body >
<div id= " container " style= " width:500px;height:200px " dir= " ltr "></div>
<div style= " display:none ">
<form id= " form1 " runat= " server " >
<table id= " datacate " >
<tr id= " Tr1 " runat= " server " >
<td>
<asp:Label ID= " Label1 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox1 " runat= " server " Text= " 1 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr2 " runat= " server " >
<td>
<asp:Label ID= " Label2 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox2 " runat= " server " Text= " 2 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr3 " runat= " server " >
<td>
<asp:Label ID= " Label3 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox3 " runat= " server " Text= " 3 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr4 " runat= " server " >
<td>
<asp:Label ID= " Label4 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox4 " runat= " server " Text= " 4 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr5 " runat= " server " >
<td>
<asp:Label ID= " Label5 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox5 " runat= " server " Text= " 5 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr6 " runat= " server " >
<td>
<asp:Label ID= " Label6 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox6 " runat= " server " Text= " 6 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr7 " runat= " server " >
<td>
<asp:Label ID= " Label7 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox7 " runat= " server " Text= " 7 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr8 " runat= " server " >
<td>
<asp:Label ID= " Label8 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox8 " runat= " server " Text= " 8 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr9 " runat= " server " >
<td>
<asp:Label ID= " Label9 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox9 " runat= " server " Text= " 9 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr10 " runat= " server " >
<td>
<asp:Label ID= " Label10 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox10 " runat= " server " Text= " 10 "></asp:TextBox>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<head runat= " server ">
<title>加热炉效率柱状图</title>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js "></script>
<%--<script type= " text/javascript " src= " http://cdn.hcharts.cn/highcharts/highcharts.js "></script>
<script type= " text/javascript " src= " http://cdn.hcharts.cn/highcharts/exporting.js "></script>--%>
<script src= " ../../js/jquery-1.8.3.min.js " type= " text/javascript "></script>
<script src= " ../../js/highcharts.js " type= " text/javascript "></script>
<script src= " ../../js/exporting.js " type= " text/javascript "></script>
<script type= " text/javascript ">
$(function () {
var data= new Array( 10);
var categories= new Array( 10);
var dataArr = $( " table :text ");
var cateArr =$( " table ").find( " span ");
for( var i= 0;i< 6;i++)
{
data[i]=parseFloat(dataArr[i].value);
categories[i]=cateArr[i].innerText;
}
var colors = Highcharts.getOptions().colors;
var data2 = [
{ ' color ': ' #F6BD0F ', ' y ':data[ 0]},
{ ' color ': ' #AFD8F8 ', ' y ':data[ 1]},
{ ' color ': ' #8BBA00 ', ' y ':data[ 2]},
{ ' color ': ' #F6BD0F ', ' y ':data[ 3]},
{ ' color ': ' #AFD8F8 ', ' y ':data[ 4]},
{ ' color ': ' #8BBA00 ', ' y ':data[ 5]}
{ ' color ': ' #FF8E46 ', ' y ':data[ 6]},
{ ' color ': ' #008E8E ', ' y ':data[ 7]},
{ ' color ': ' #D6468E ', ' y ':data[ 8]},
{ ' color ': ' #AFD8F8 ', ' y ':data[ 9]}
];
var chart = $( ' #container ').highcharts({
chart: {
type: ' column '
},
title: {
text: ' 本天效率最低的10个加热炉 ',
style:{
color: ' #3E576F ',
fontSize: ' 13px '
}
},
xAxis: {
categories:categories,
labels: {
// rotation: -45,
align: ' center ',
style: {
fontSize: ' 13px ',
fontFamily: ' Verdana, sans-serif '
}
}
},
yAxis: {
min: 80,
max: 100,
title: {
text: ' 加热炉效率 (%) '
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: ' 加热炉当天效率: <b>{point.y:.2f} %</b> ',
},
plotOptions:{
column:{
depth: 25
}
},
credits:{
enabled: false
},
series: [{
name: ' 加热炉效率 ',
data: data2,
dataLabels: {
// enabled: true,
// rotation: -90,
align: ' right ',
x: 4,
y: 10,
style: {
fontSize: ' 15px ',
fontFamily: ' Verdana, sans-serif ',
textShadow: ' 0 0 3px red '
}
}
}]
});
});
</script>
</head>
<body >
<div id= " container " style= " width:500px;height:200px " dir= " ltr "></div>
<div style= " display:none ">
<form id= " form1 " runat= " server " >
<table id= " datacate " >
<tr id= " Tr1 " runat= " server " >
<td>
<asp:Label ID= " Label1 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox1 " runat= " server " Text= " 1 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr2 " runat= " server " >
<td>
<asp:Label ID= " Label2 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox2 " runat= " server " Text= " 2 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr3 " runat= " server " >
<td>
<asp:Label ID= " Label3 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox3 " runat= " server " Text= " 3 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr4 " runat= " server " >
<td>
<asp:Label ID= " Label4 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox4 " runat= " server " Text= " 4 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr5 " runat= " server " >
<td>
<asp:Label ID= " Label5 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox5 " runat= " server " Text= " 5 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr6 " runat= " server " >
<td>
<asp:Label ID= " Label6 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox6 " runat= " server " Text= " 6 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr7 " runat= " server " >
<td>
<asp:Label ID= " Label7 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox7 " runat= " server " Text= " 7 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr8 " runat= " server " >
<td>
<asp:Label ID= " Label8 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox8 " runat= " server " Text= " 8 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr9 " runat= " server " >
<td>
<asp:Label ID= " Label9 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox9 " runat= " server " Text= " 9 "></asp:TextBox>
</td>
</tr>
<tr id= " Tr10 " runat= " server " >
<td>
<asp:Label ID= " Label10 " runat= " server " Text= " 2 "></asp:Label>
</td>
<td>
<asp:TextBox ID= " TextBox10 " runat= " server " Text= " 10 "></asp:TextBox>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>