利用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 = ...
随机推荐
- SDWebImage源码解读之SDWebImageDownloader
SDWebImage源码解读之SDWebImageDownloader 第八篇 前言 SDWebImageDownloader这个类非常简单,作者的设计思路也很清晰,但是我想在这说点题外话. 如果有人 ...
- cocos2d-x android项目引用so库编译
项目接了几十个渠道平台,每个平台都建了一个Android工程,引用Classes,由于才用java接口类来抽象出平台接口方法,所以每个工程的Android.mk是完全一致的,也就是说libgame.s ...
- 分享form表单提交问题
前段时间做了一个form表单传值问题 当时觉得form表单的submit不就是提交form表单name的value值吗 ? 其实是对的 但是我做的是一个打印页面 需要把当前页面的元素传入下一个u ...
- 冒泡算法（C++模板实现）
冒泡排序 从整体上看,冒泡排序是一种稳定排序,即排序完成后,原本序列中的键值相等的元素相对位置不会发生改变.算法的时间复杂度是O(n2),空间复杂度为O(1),即这是一个"就地算法" ...
- ssl error rx record too long
- IP头部校验（转）
一:原理 当发送IP包时,需要计算IP报头的校验和: 1.把校验和字段置为0: 2.对IP头部中的每16bit进行二进制求和: 3.如果和的高16bit不为0,则将和的高16bit和低16bit反复相 ...
- 在Linux系统中修改IP地址
在Linux系统中,通过编辑网络配置文件,设置系统IP地址,当然要在root权限下执行,具体步骤如下: 1.切换路径到/etc/sysconfig/network-scripts [root@Comp ...
- JBOSS实现RMI时注意的问题
使用JBOSS部署EJB服务后通过RMI访问报错: javax.naming.CommunicationException: Could not obtain connection to any of ...
- 音频播放(iOS开发)
音频处理 一.录音 录音应用场景 语音聊天 即时通讯软件中,都包含语音发送功能 语音备忘录 录一段音频,来记录某件事情 录音功能实现 导入AVFoundation框架 作用:一些多媒体的处理,基本上都 ...
- 【转】基于RMAN实现坏块介质恢复(blockrecover)
本文转自:乐沙弥的世界 对于物理损坏的数据块,我们可以通过RMAN块介质恢复(BLOCK MEDIA RECOVERY)功能来完成受损块的恢复,而不需要恢复整个数据库或所有文件来修复这些少量受损的数据 ...