你的位置:首页 > ASP.net教程

[ASP.net教程]利用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 "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>