利用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>
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>

你可能感兴趣的:(Highcharts)