·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 利用Highcharts制作web图表学习（二）

【如有意向点此提交需求】关于我们

利用Highcharts制作web图表学习（二）

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

利用Highcharts制作web图表学习（二）

最近中海油的项目需要用到图表展示数据，最近还是一直边学习边开发，今天做了一个展示，炼化厂加热炉效率展示的柱状图，把代码贴出来，大家指点一下互相学习，我是通过数组给Highcharts绑定的值，感觉这样做有点麻烦而且不灵活，大家有比较好的建议可以帮我看下，我引用了三个js，可以把本地的js注释掉用这些<scripttype="text/javascript"src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><scripttype="text/Javascript"src="http://cdn.hcharts.cn/highcharts/exporting.js"></script><scripttype="text/javascript"src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>exporting.js是用来将图表导出成你想要的格式。源码如下：<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>加热炉效率柱状图</title><scripttype="text/javascript"src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><%--<scripttype="text/javascript"src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><scripttype="text/javascript"src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>--%><scriptsrc="../../js/jquery-1.8.3.min.js"type="text/javascript"></script><scriptsrc="../../js/highcharts.js"type="text/javascript"></script><scriptsrc="../../js/exporting.js"type="text/javascript"></script><scripttype="text/javascript">$(function(){vardata=newArray(10);varcategories=newArray(10);vardataArr=$("table:text");varcateArr=$("table").find("span");for(vari=0;i<6;i++){data[i]=parseFloat(dataArr[i].value);categories[i]=cateArr[i].innerText;}varcolors=Highcharts.getOptions().colors;vardata2=[{'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]}];varchart=$('#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:'003pxred'}}}]});});</script></head><body><divid="container"style="width:500px;height:200px"dir="ltr"></div><divstyle="display:none"><formid="form1"runat="server"><tableid="datacate"><trid="Tr1"runat="server"><td><asp:LabelID="Label1"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox1"runat="server"Text="1"></asp:TextBox></td></tr><trid="Tr2"runat="server"><td><asp:LabelID="Label2"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox2"runat="server"Text="2"></asp:TextBox></td></tr><trid="Tr3"runat="server"><td><asp:LabelID="Label3"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox3"runat="server"Text="3"></asp:TextBox></td></tr><trid="Tr4"runat="server"><td><asp:LabelID="Label4"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox4"runat="server"Text="4"></asp:TextBox></td></tr><trid="Tr5"runat="server"><td><asp:LabelID="Label5"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox5"runat="server"Text="5"></asp:TextBox></td></tr><trid="Tr6"runat="server"><td><asp:LabelID="Label6"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox6"runat="server"Text="6"></asp:TextBox></td></tr><trid="Tr7"runat="server"><td><asp:LabelID="Label7"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox7"runat="server"Text="7"></asp:TextBox></td></tr><trid="Tr8"runat="server"><td><asp:LabelID="Label8"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox8"runat="server"Text="8"></asp:TextBox></td></tr><trid="Tr9"runat="server"><td><asp:LabelID="Label9"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox9"runat="server"Text="9"></asp:TextBox></td></tr><trid="Tr10"runat="server"><td><asp:LabelID="Label10"runat="server"Text="2"></asp:Label></td><td><asp:TextBoxID="TextBox10"runat="server"Text="10"></asp:TextBox></td></tr></table></form></div></body></html>