利用Highcharts制作web图表学习（二）
<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>
<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();
var categories=new Array();
var dataArr = $("table :text");
var cateArr =$("table").find("span");
for(var i=;i<;i++)
{
data[i]=parseFloat(dataArr[i].value);
categories[i]=cateArr[i].innerText;
}
var colors = Highcharts.getOptions().colors;
var data2 = [
{'color':'#F6BD0F','y':data[]},
{'color':'#AFD8F8','y':data[]},
{'color':'#8BBA00','y':data[]},
{'color':'#F6BD0F','y':data[]},
{'color':'#AFD8F8','y':data[]},
{'color':'#8BBA00','y':data[]}
{'color':'#FF8E46','y':data[]},
{'color':'#008E8E','y':data[]},
{'color':'#D6468E','y':data[]},
{'color':'#AFD8F8','y':data[]}
];
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: ,
max: ,
title: {
text: '加热炉效率 (%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '加热炉当天效率: <b>{point.y:.2f} %</b>',
},
plotOptions:{
column:{
depth:
}
},
credits:{
enabled:false
},
series: [{
name: '加热炉效率',
data: data2,
dataLabels: {
// enabled: true,
// rotation: -90,
align: 'right',
x: ,
y: ,
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=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr2" runat="server" >
<td>
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr3" runat="server" >
<td>
<asp:Label ID="Label3" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr4" runat="server" >
<td>
<asp:Label ID="Label4" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr5" runat="server" >
<td>
<asp:Label ID="Label5" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr6" runat="server" >
<td>
<asp:Label ID="Label6" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr7" runat="server" >
<td>
<asp:Label ID="Label7" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr8" runat="server" >
<td>
<asp:Label ID="Label8" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox8" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr9" runat="server" >
<td>
<asp:Label ID="Label9" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox9" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr id="Tr10" runat="server" >
<td>
<asp:Label ID="Label10" runat="server" Text=""></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox10" runat="server" Text=""></asp:TextBox>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
利用Highcharts制作web图表学习（二）的更多相关文章
- 利用Highcharts制作web图表学习（一）
前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网 一.先说说HighCharts的 ...
- 使用highcharts 绘制Web图表
问题描述: 使用highcharts 绘制Web图表 Highcharts说明: 问题解决: (1)安装Highcharts 在这些图表中,数据源是一个典型的JavaScrip ...
- D3制作基础图表学习总结(part1)
一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki 二.建立图表 ...
- Web安全学习二
目录 常见漏洞攻防 SQL注入 注入分类 按技巧分类 按获取数据的方式分类 注入检测 权限提升 数据库检测 绕过技巧 CheatSheet SQL Server Payload MySQL Paylo ...
- web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
- WEB安全学习二、注入工具 sqlmap的使用
使用的是Kali Linux 系统,系统中默认的sqlmap 是安装好了的,电脑上没有安装sqlmap,自己百度 ,需要python的环境 使用 命令 sqlmap -h 可以查看 sqlm ...
- JFinal Web开发学习(二)目录、架构、package设计
package分类 config是JFinal的项目配置 controller是控制器 handler可以设置全局处理器,例如判断用户请求中是否直接请求 FreeMarker的模板文件ftl或者htm ...
- Highcharts使用教程（1）：制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...
- 风炫安全web安全学习第三十七节课 15种上传漏洞讲解(二)
风炫安全web安全学习第三十七节课 15种上传漏洞讲解(二) 05后缀名黑名单校验之上传.htaccess绕过 还是使用黑名单,禁止上传所有web容器能解析的脚本文件的后缀 $is_upload = ...
随机推荐
- [JCWC2005]Draw
Einstein学起了画画,此人比较懒--,他希望用最少的笔画画出一张画...给定一个无向图,包含 n 个顶点(编号1~n),m 条边,求最少用多少笔可以画出图中所有的边 Input (draw.in ...
- NOIP2015 斗地主（搜索+剪枝）
4325: NOIP2015 斗地主 Time Limit: 30 Sec Memory Limit: 1024 MBSubmit: 270 Solved: 192[Submit][Status] ...
- hive0.11的编译/安装/配置
一.获取hive 0.11文件 1.直接在apache网站下载release版 2.自己下载源码编译.方法: git clone https://github.com/amplab/hive.git ...
- Spark Pipe使用方法（外部程序调用方法）
写在前面: 1.我们使用的是Hadoop2.2.0,Spark 1.0. 2.这里使用的样例是经典的求pai程序来演示这个开发过程. 3.我们暂时使用java程序来开发,按照需要后面改用scala来开 ...
- hdu 3549 Flow Problem (最大流)
裸最大流,做模板用 m条边,n个点,求最大流 #include <iostream> #include <cstdio> #include <cstring> #i ...
- IIS8之System.ServiceModel.Activation.HttpModule錯誤處理
在Windows Server 2012 R2上安装一个WCF服务,怎么弄都是报System.ServiceModel.Activation.HttpModule錯誤 经过不懈尝次及查找资料,终于找到 ...
- The Dangers of JavaScript’s Automatic Semicolon Insertion
Although JavaScript is very powerful, the language’s fundamentals do not have a very steep learning ...
- Oracle- 初识
我一直没用过ORACLE.今天总算装上了,说一下我装的过程,感觉还是有点折腾的. 一.我装的是ORACLE 9版本,从网上下载的总大小1.3G.是三个压缩包. 首先我解压三个压缩包后,使用UltraI ...
- "用wow64exts调试64位任务管理器抓取的32位程序的dump"
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:"用wow64exts调试64位任务管理器抓取的32位程序的dump".
- UIImageC处理
UIImageC处理 1.等比缩放 - (UIImage *) scaleImage:(UIImage *)image toScale:(float)scaleSize { UIGraphicsBeg ...