利用Highcharts制作web圖表學習（二）

2019-11-17 02:03:19

字體：大中小

來源：轉載

供稿：網友

利用Highcharts制作web圖表學習（二）

最近中海油的項目需要用到圖表展示數據，最近還是一直邊學習邊開發，今天做了一個展示，煉化廠加熱爐效率展示的柱狀圖，把代碼貼出來，大家指點一下互相學習，我是通過數組給Highcharts綁定的值，感覺這樣做有點麻煩而且不靈活，大家有比較好的建議可以幫我看下，我引用了三個js，可以把本地的js注釋掉用這些<scrjavascript"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>

上一篇：ASP.NET中使用開源插件zTree的小結

下一篇：IIS中的經典模式和集成模式有什么區別