利用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 = ...
随机推荐
- Java笔记(十三)……面向对象III继承(inheritance)
继承概述 继承概述 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继那个类即可. 多个类可以称为子类,单独这个类称为父类或者超类. 子类可以直接访 ...
- tmux快捷键`
Ctrl+b 激活控制台:此时以下按键生效 系统操作 ? 列出所有快捷键:按q返回 d 脱离当前会话:这样可以暂时返回Shell界面,输入tmux attach能够重新进入之前的会话 D 选择要脱离的 ...
- Linux设备驱动中的异步通知与异步I/O
异步通知概念: 异步通知的意识是,一旦设备就绪,则主动通知应用程序,这样应用程序根本就不需要查询设备状态,这一点非常类似于硬件上的“中断”概念,比较准确的称谓是“信号驱动的异步IO”,信号是在软件层次 ...
- （一）Redis初学教程之安装篇
1.下载windows下Redis服务安装程序(有32位的和64位的,识操作系统安装) 下载地址:https://github.com/dmajkic/redis/downloads 2.安装教程(详 ...
- github上值得关注的前端项目
https://segmentfault.com/a/1190000002804472
- AngularJS开发下一代Web应用笔记（一）
一.写在最前 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等. 现在网上JS框架茫茫多,真 ...
- Android执行shell命令
一.方法 /** * 执行一个shell命令,并返回字符串值 * * @param cmd * 命令名称&参数组成的数组(例如:{"/system/bin/cat", &q ...
- schedule
cocos2d-x(时间调度) 在游戏中,时常需要隔一段时间更新一些数据或者是人物位置,Cocos2D-x 中提供了这些时间调度的函数,所有CCNode 类的子类都有这样的函数. schedule(s ...
- Modify the average program to promote for intergers repeatedly.stop when a nagetive number is entere
#include<stdio.h> int main(void) { intcount ,sum,aninterger; printf("enterthe interger an ...
- JAVA锁的可重入性
机制:每个锁都关联一个请求计数器和一个占有他的线程,当请求计数器为0时,这个锁可以被认为是unhled的,当一个线程请求一个unheld的锁时,JVM记录锁的拥有者,并把锁的请求计数加1,如果同一个线 ...