最近中海油的项目需要用到图表展示数据，最近还是一直边学习边开发，今天做了一个展示，炼化厂加热炉效率展示的柱状图，把代码贴出来，大家指点一下互相学习，我是通过数组给Highcharts绑定的值，感觉这样做有点麻烦而且不灵活，大家有比较好的建议可以帮我看下，我引用了三个js，可以把本地的js注释掉用这些
  1. <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  2.   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
  3.  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
exporting.js是用来将图表导出成你想要的格式。
源码如下：
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title>加热炉效率柱状图</title>
  4.  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  5.   <%--<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  6.   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>--%>
  7.   <script src="../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
  8.   <script src="../../js/highcharts.js" type="text/javascript"></script>
  9.     <script src="../../js/exporting.js" type="text/javascript"></script>
  10.   <script type="text/javascript">
  11.  
  12.      $(function () {
  13.     
  14.     var data=  new Array();
  15.     var categories=new Array();
  16.    
  17.   
  18.       var dataArr = $("table :text");
  19.       var cateArr =$("table").find("span");
  20.      
  21.       for(var i=;i<;i++)
  22.                 {
  23.                   data[i]=parseFloat(dataArr[i].value);
  24.                   categories[i]=cateArr[i].innerText;
  25.                  
  26.                 }
  27.     var colors = Highcharts.getOptions().colors;
  28.     
  29.     var data2 = [
  30.                 {'color':'#F6BD0F','y':data[]}, 
  31.                 {'color':'#AFD8F8','y':data[]}, 
  32.                 {'color':'#8BBA00','y':data[]}, 
  33.                 {'color':'#F6BD0F','y':data[]}, 
  34.                 {'color':'#AFD8F8','y':data[]},
  35.                 {'color':'#8BBA00','y':data[]}
  36.                {'color':'#FF8E46','y':data[]}, 
  37.               {'color':'#008E8E','y':data[]}, 
  38.               {'color':'#D6468E','y':data[]}, 
  39.                {'color':'#AFD8F8','y':data[]}
  40.                ];
  41.   var chart =  $('#container').highcharts({
  42.         chart: {
  43.               type: 'column'
  44.         },
  45.        
  46.        
  47.         title: {
  48.             text: '本天效率最低的10个加热炉',
  49.          style:{
  50.             color: '#3E576F',
  51.             fontSize: '13px'
  52.             }
  53.         },
  54.         xAxis: {
  55.             categories:categories, 
  56.                 
  57.             labels: {
  58. //                rotation: -45,
  59.                 align: 'center',
  60.                 style: {
  61.                     fontSize: '13px',
  62.                     fontFamily: 'Verdana, sans-serif'
  63.                 }
  64.             }
  65.         },
  66.         yAxis: {
  67.             min: ,
  68.             max: ,
  69.             title: {
  70.                 text: '加热炉效率 (%)'
  71.             }
  72.         },
  73.         legend: {
  74.             enabled: false
  75.         },
  76.         tooltip: {
  77.             pointFormat: '加热炉当天效率: <b>{point.y:.2f} %</b>',
  78.         },
  79.         plotOptions:{
  80.             column:{ 
  81.                 depth: 
  82.                 }
  83.          },
  84.          credits:{
  85.          enabled:false
  86.          },
  87.         series: [{
  88.             name: '加热炉效率',
  89.             data: data2,
  90.             dataLabels: {
  91. //                enabled: true,
  92. //                rotation: -90,
  93.                 
  94.                 align: 'right',
  95.                 x: ,
  96.                 y: ,
  97.                 style: {
  98.                     fontSize: '15px',
  99.                     fontFamily: 'Verdana, sans-serif',
  100.                     textShadow: '0 0 3px red'
  101.                 }
  102.             }
  103.         }]
  104.     });
  105. });
  106.   </script>
  107. </head>
  108. <body >
  109.   <div id="container" style="width:500px;height:200px" dir="ltr"></div>
  110.   <div style="display:none">
  111.   <form id="form1" runat="server" >
  112.    <table id="datacate"  >
  113.    <tr id="Tr1" runat="server" >
  114.    <td>
  115.    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
  116.    </td>
  117.    <td>
  118.    <asp:TextBox ID="TextBox1"  runat="server" Text=""></asp:TextBox>
  119.    </td>
  120.    </tr>
  121.    <tr id="Tr2" runat="server" >
  122.    <td>
  123.    <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
  124.    </td>
  125.    <td>
  126.    <asp:TextBox ID="TextBox2"  runat="server" Text=""></asp:TextBox>
  127.    </td>
  128.    </tr>
  129.    <tr id="Tr3" runat="server" >
  130.    <td>
  131.    <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
  132.    </td>
  133.    <td>
  134.    <asp:TextBox ID="TextBox3"  runat="server" Text=""></asp:TextBox>
  135.    </td>
  136.    </tr>
  137.    <tr id="Tr4" runat="server" >
  138.    <td>
  139.    <asp:Label ID="Label4" runat="server" Text=""></asp:Label>
  140.    </td>
  141.    <td>
  142.    <asp:TextBox ID="TextBox4"  runat="server" Text=""></asp:TextBox>
  143.    </td>
  144.    </tr>
  145.    <tr id="Tr5" runat="server" >
  146.    <td>
  147.    <asp:Label ID="Label5" runat="server" Text=""></asp:Label>
  148.    </td>
  149.    <td>
  150.    <asp:TextBox ID="TextBox5"  runat="server" Text=""></asp:TextBox>
  151.    </td>
  152.    </tr>
  153.    <tr id="Tr6" runat="server" >
  154.    <td>
  155.    <asp:Label ID="Label6" runat="server" Text=""></asp:Label>
  156.    </td>
  157.    <td>
  158.    <asp:TextBox ID="TextBox6"  runat="server" Text=""></asp:TextBox>
  159.    </td>
  160.    </tr>
  161.    <tr id="Tr7" runat="server" >
  162.    <td>
  163.    <asp:Label ID="Label7" runat="server" Text=""></asp:Label>
  164.    </td>
  165.    <td>
  166.    <asp:TextBox ID="TextBox7"  runat="server" Text=""></asp:TextBox>
  167.    </td>
  168.    </tr>
  169.    <tr id="Tr8" runat="server" >
  170.    <td>
  171.    <asp:Label ID="Label8" runat="server" Text=""></asp:Label>
  172.    </td>
  173.    <td>
  174.    <asp:TextBox ID="TextBox8"  runat="server" Text=""></asp:TextBox>
  175.    </td>
  176.    </tr>
  177.    <tr id="Tr9" runat="server" >
  178.    <td>
  179.    <asp:Label ID="Label9" runat="server" Text=""></asp:Label>
  180.    </td>
  181.    <td>
  182.    <asp:TextBox ID="TextBox9"  runat="server" Text=""></asp:TextBox>
  183.    </td>
  184.    </tr>
  185.    <tr id="Tr10" runat="server" >
  186.    <td>
  187.    <asp:Label ID="Label10" runat="server" Text=""></asp:Label>
  188.    </td>
  189.    <td>
  190.    <asp:TextBox ID="TextBox10"  runat="server" Text=""></asp:TextBox>
  191.    </td>
  192.    </tr>
  193.    </table>
  194.    </form>
  195.   </div>
  196. </body>
  197. </html>

利用Highcharts制作web图表学习（二）的更多相关文章

  1. 利用Highcharts制作web图表学习（一）

    前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网   一.先说说HighCharts的 ...

  2. 使用highcharts 绘制Web图表

    问题描述:     使用highcharts 绘制Web图表 Highcharts说明: 问题解决:     (1)安装Highcharts     在这些图表中,数据源是一个典型的JavaScrip ...

  3. D3制作基础图表学习总结(part1)

    一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki  二.建立图表 ...

  4. Web安全学习二

    目录 常见漏洞攻防 SQL注入 注入分类 按技巧分类 按获取数据的方式分类 注入检测 权限提升 数据库检测 绕过技巧 CheatSheet SQL Server Payload MySQL Paylo ...

  5. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  6. WEB安全学习二、注入工具 sqlmap的使用

    使用的是Kali Linux 系统,系统中默认的sqlmap 是安装好了的,电脑上没有安装sqlmap,自己百度  ,需要python的环境 使用 命令   sqlmap -h 可以查看   sqlm ...

  7. JFinal Web开发学习(二)目录、架构、package设计

    package分类 config是JFinal的项目配置 controller是控制器 handler可以设置全局处理器,例如判断用户请求中是否直接请求 FreeMarker的模板文件ftl或者htm ...

  8. Highcharts使用教程（1）：制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  9. 风炫安全web安全学习第三十七节课 15种上传漏洞讲解(二)

    风炫安全web安全学习第三十七节课 15种上传漏洞讲解(二) 05后缀名黑名单校验之上传.htaccess绕过 还是使用黑名单,禁止上传所有web容器能解析的脚本文件的后缀 $is_upload = ...

随机推荐

  1. [HZWER]藏妹子之处

    问题描述 今天CZY又找到了三个妹子,有着收藏爱好的他想要找三个地方将妹子们藏起来,将一片空地抽象成一个R行C列的表格,CZY要选出3个单元格.但要满足如下的两个条件: (1)任意两个单元格都不在同一 ...

  2. wuzhicms刷新按钮的功能开发

    这个刷新按钮可以刷新当前框架的页面. 但有的页面使用了弹窗打开后,再点击刷新就会打开之前的弹窗页面. 如: 再刷新的时候,这个框架内容就变了.而这里,我们实际需要刷新的是列表页面 打开这个程序的具体文 ...

  3. Hadoop工程师面试题(1)--MapReduce实现单表汇总统计

    数据源格式描述: 输入t1.txt源数据,数据文件分隔符"*&*",字段说明如下: 字段序号 字段英文名称 字段中文名称 字段类型 字段长度 1 TIME_ID 时间(到时 ...

  4. HDOJ-ACM1003(JAVA)

    转载声明:原文转自http://www.cnblogs.com/xiezie/p/5502855.html 第一.二次的思路都是穷举: 第一次的实现是用二维数组: import java.util.* ...

  5. Java和.NET的GZIP压缩功能对比

    本文主要比较了Java和.NET提供的GZIP压缩功能. 介绍 在本文中,我们将讨论Java和.NET提供的GZIP压缩功能,并且用实例来说明哪个压缩方法更佳. 在Java中,我们有提供GZIP压缩的 ...

  6. 如何在Maven官网下载到历史版本

    历史版本一般会隔一段时间,便找不到,官网会及时显示的是最新版本.不多说,直接进入. https://archive.apache.org/dist/maven/binaries/ 成功在Maven官网 ...

  7. Powerdesigner设置name与code不同时变化

    Tools-General Options-Dialog Name to Code mirroring去掉对勾

  8. CALayer 的 position和anchorPoint属性

    在iOS 中,UIButton.UIImage等UIView 之所以能够显示在屏幕上,是因为其内部有一个图层(CALayer).通过UIView的layer 属性可以访问这个图层: @property ...

  9. SQL注入专题

    SQL注入专题--整理帖 SQL注入是从正常的WWW端口访问,而且表面看起来跟一般的Web页面访问没什么区别, 所以目前市面的防火墙都不会对SQL注入发出警报,如果管理员没查看IIS日志的习惯,可能被 ...

  10. background-position也许你没考虑到

    设置背景图片时不知你有没有遇到过背景位置的困扰,有没有深入思考过,background-position到底是什么,下面请各位看看我的理解. 简而言之就一句话,默认图片左上角居元素左上角的坐标,例如: ...