利用Highcharts製做web圖表學習（二）

時間 2019-12-05

原文原文鏈接

最近中海油的項目須要用到圖表展現數據，最近仍是一直邊學習邊開發，今天作了一個展現，煉化廠加熱爐效率展現的柱狀圖，把代碼貼出來，你們指點一下互相學習，我是經過數組給Highcharts綁定的值，感受這樣作有點麻煩並且不靈活，你們有比較好的建議能夠幫我看下，我引用了三個js，能夠把本地的js註釋掉用這些

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>