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

浏览数：25 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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