利用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 = ...
随机推荐
- bzoj2946 [Poi2000]公共串（SA，SAM）
[题意] 多串求LCS. [思路] 主要是想找一下SAM的优越感 :) velui good 后缀数组划分height需要注意不少细节 <_<,然后不停debug [代码] ...
- 初探WebService
写博客也是一件非常费时的事儿啊,之前配置服务器和客户端的Oracle数据库搞了很久,搞定之后懒的记录,现在想想如果让我再配一次,估计又要花很长时间了. 所以把做过的东西整理整理记录下来还是很有必要的, ...
- HW2.23
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- POJ2192 - Zipper（区间DP）
题目大意 给定三个字符串s1,s2,s3,判断由s1和s2的字符能否组成字符串s3,并且要求组合后的字符串必须是s1,s2中原来的顺序. 题解 用dp[i][j]表示s1的前i个字符和s2的前j个字符 ...
- Weblogic 集群部署说明 --转
代理web.xml 设置 <servlet> l <servlet-name>HttpClusterServlet</servlet-nam ...
- Oracle ABP(Autotask Background Process)
ABP相当于自动任务与调度程序之间的中介,其主要作用是将自动任务转换成Autotask作业,供调度程序执行.同样重要的是,ABP还维护所有任务执行的历史记录.ABP将其专用资料档案库存储在sysaux ...
- 如何用Windbg找到被catch住的C++的异常
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何用Windbg找到被catch住的C++的异常.
- Cactus入门
这是一个WebProject,有关Cactus用法详见本文测试用例 首先是web.xml <?xml version="1.0" encoding="UTF-8&q ...
- C++ ComboBox基础
关键点 实现过程 //添加 //添加字符串 m_cbo1.AddString("AAA"); m_cbo1.AddString("BBB"); m_cbo1.A ...
- Splay Tree的删除操作
Splay Tree的插入操作,搜索操作,和删除操作都实现了,那么就能够使用来解题了. 指针的删除操作的处理还是那么难的,非常多坎须要避开. 同一个坎还是坑了我好多次,就是指针传递的问题,什么时候须要 ...