最近中海油的项目需要用到图表展示数据，最近还是一直边学习边开发，今天做了一个展示，炼化厂加热炉效率展示的柱状图，把代码贴出来，大家指点一下互相学习，我是通过数组给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>
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>