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

最新推荐文章于 2021-08-05 10:20:15 发布

dazigeng4522

最新推荐文章于 2021-08-05 10:20:15 发布

阅读量88

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wangshuai6707/p/4388922.html

版权

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

转载于:https://www.cnblogs.com/wangshuai6707/p/4388922.html

dazigeng4522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用Highcharts制作web图表学习（二）

最近中海油的项目需要用到图表展示数据，最近还是一直边学习边开发，今天做了一个展示，炼化厂加热炉效率展示的柱状图，把代码贴出来，大家指点一下互相学习，我是通过数组给Highcharts绑定的值，感觉这样做有点麻烦而且不灵活，大家有比较好的建议可以帮我看下，我引用了三个js，可以把本地的js注释掉用这些<scripttype="text/javascript"src="ht...
复制链接

扫一扫