利用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 = ...
随机推荐
- ActiveMQ中的安全机制 [转]
本文简单介绍ActiveMQ通过JAAS实现的安全机制.JAAS(Java Authentication and Authorization Service)也就是java认证/授权服务.这是两种不同 ...
- Unity4.3.3 烘焙踩坑
许久没发文章了,开始实习了,挺忙的基本没什么时间了 unity4.3.3是一个非常古老的版本了,弄了一下烘焙,踩了不少坑, 首先是unity自带的nature shader,其中有soft occlu ...
- 【CSS3】Advanced7：CSS Transitions
1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animati ...
- 判断两棵树是否相等 leecode
很简单 提交代码 https://oj.leetcode.com/problems/same-tree/ iven two binary trees, write a function to chec ...
- 单调栈 二 nyOj 最大矩形和
主要思想来自 http://blog.csdn.net/wuyanyi/article/details/7243580 题目的连接,头次提交的同学需要注册 http://acm.nyist.net/J ...
- Java笔记(一)……概述
一.Java是什么 Java是SUN(Stanford University Network,斯坦福大学网络公司)1995年推出的一门高级编程语言. 二.Java的发展简史 在20世纪90年代初,Su ...
- HW4.38
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- POJ1423 - Big Number(Stirling公式)
题目大意 求N!有多少位 题解 用公式直接秒杀... 代码: #include<iostream> #include<cmath> using namespace std; # ...
- windows 7 下安装 IIS 和 ArcGis Server 9.3 遇到的问题及解决方法
windows 7 下安装 IIS 和 ArcGis Server 9.3 遇到的问题及解决方法 分类: ArcGIS server 计算机2012-07-31 14:17 631人阅读 评论(0) ...
- hdoj 2803 The MAX【简单规律题】
The MAX Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...