Highcharts中初始化最大值与最小值的柱状图
<!doctype html> <html lang="en"> <head> <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>
//上面的Javascript代码
</script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body> </html>
var resultObj = "{name:'当月总量数',data:[101.6,100.0,102.7,102.1,105.1]}@{name:'累计总量数',data:[102.4,100.9,101.5,101.6,102.3]}";
var resultText = resultObj.toString();
var resultStr = resultText.split("@");
var min = null,max = null,mark = true,data = null;
for(var i=0;i<resultStr.length;i++){
var jSVO = eval("("+resultStr[i] +")");
resultStr[i] = jSVO;
data = resultStr[i].data;
for(var j = 0, len = data.length;j < len;j ++){
if(data[j] == null){
continue;
}
if(mark){
mark = false;
min = data[j],max = data[j];
}
if(min > data[j]){
min = data[j];
}
if(max < data[j]){
max = data[j];
}
}
}
console.log(min + "======" + max);
//X轴
var xAxisObj = "2013年09月@12月@2014年03月@06月@09月"
var xAxisText = xAxisObj.toString();
var xAxisStr = xAxisText.split("@");
$(function () {
//画图
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: ""
},
colors:['#8300b6','#73abe4'],
subtitle: {
text: ""
},
xAxis: {
tickmarkPlacement:'on',
labels:{
rotation:-15, //X轴坐标旋转
style:{
fontSize:'18px' //X轴坐标字体大小
}
},
categories: xAxisStr
},
yAxis: {
min: min,
max: max,
title: {
text: ""
},
labels : {
enabled: true,
style:{
fontSize:'14px'
}
}
},
credits:{
enabled: false//右下角的文本
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},
tooltip: {
enabled: true, //是否显示提示信息
headerFormat: '<span style="font-size:16px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
style:{
fontSize:'14px'
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,//图形上是否显示数据
format:'{y:.1f}',
pointWidth: 10,
pointPadding : 0.1,
style:{
fontSize:'10px'//图形上数据的字体大小
}
},
enableMouseTracking: true//鼠标移动时有信息提示
}
},
series: resultStr
});
});
Highcharts中初始化最大值与最小值的柱状图的更多相关文章
- 如何使用Math对象快速计算数组中的最大值或最小值
Math 对象下包含 min() 和 max() 方法 用于确定一组数值中的最大值和最小值.这两个方法都可以接收任意多个数值参数. var max = Math.max(1,2,3,4,5,6); c ...
- C++ 如何获取三个相同数值中的最大值或最小值？
C++ 如何获取三个相同数值中的最大值或最小值? template<typename T> T Max(T x, T y, T z) { return x > y ? (x > ...
- C#获取一个数组中的最大值、最小值、平均值
C#获取一个数组中的最大值.最小值.平均值 1.给出一个数组 ,,,,,-,,,,}; 2.数组Array自带方法 本身是直接可以调用Min(),Max(),Average()方法来求出 最小值.最大 ...
- Jsの数组练习-求一组数中的最大值和最小值，以及所在位置
要求:求一组数中的最大值和最小值,以及所在位置 代码实现: <!DOCTYPE html> <html lang="en"> <head> &l ...
- C语言位操作--两整数中的最大值与最小值
不用选择分支找出指定两整数中的最大值与最小值: int x; int y; // 找出x与y的最大值与最小值 int r; // r保存结果 r = y ^ ((x ^ y) & -(x &l ...
- Javascript获取数组中的最大值和最小值的方法汇总
比较数组中数值的大小是比较常见的操作,下面同本文给大家分享四种放哪广发获取数组中最大值和最小值,对此感兴趣的朋友一起学习吧 比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,比如可以使用 ...
- 数组中的最大值以及最小值的位置变换的问题（C++）
将一个5×5的数组中的最大值放到数组的中心位置 分析:遍历数组,找到最大的元素,然后将该元素与中心位置的元素交换位置 #include<iostream> #include <std ...
- 2.10 用最少次数寻找数组中的最大值和最小值[find min max of array]
[本文链接] http://www.cnblogs.com/hellogiser/p/find-min-max-of-array.html [题目] 对于一个由N个整数组成的数组,需要比较多少次才能把 ...
- Java求一个数组中的最大值和最小值
原创作品,转载请注明出处:https://www.cnblogs.com/sunshine5683/p/9927186.html 今天在工作中遇到对一个已知的一维数组取出其最大值和最小值,分别用于参与 ...
随机推荐
- Windows Server 2003 IIS支持ASP
1.ASP支持是很简单的 这里简单的说一下 2.安装IIS服务 这里就不多演示了 很简单的 3.安装完成后打开IIS的扩展功能 ASP代码测试页为: <% response.write( ...
- Lucene 4.0
关于4.0的Update Index ,Create Index /* * Create Index */ public static void createIndex() throws IOExc ...
- AngularJS(14)-动画
AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!DOCTYPE html> &l ...
- Mongodb 级联删除查询操作
ObjRelationPojo表一条记录 public class YpObjRelationPojo implements Serializable { @Id private String id; ...
- Microsoft Azure 全球状态
除了mooncake的中国大陆区域 Azure status http://azure.microsoft.com/en-us/status/?rnd=1#current http://azure.m ...
- DB 从zl.xml中导入数据库用户名及密码等！
package com.dy.java; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
- android LayoutInflater.inflate()的参数介绍
LayoutInflater.inflate()的作用就是将一个xml定义的布局文件实例化为view控件对象: 与findViewById区别: LayoutInflater.inflate是加载一个 ...
- glog使用
How To Use Google Logging Library Glog 的基本使用方法在google code上有介绍:How To Use Google Logging Library ;最好 ...
- Jboss wildfly add JDBC driver
Jboss wildfly 添加 JDBC driver 我这里使用的是 wildfly-8.0.0.Final 第一步: 首先在modules里面添加mysql的驱动包 例如:modules\sy ...
- List<T>中Exists 和Contains的区别
.net编码中,使用泛型List<>时,经常遇到这样的需求:新来一个Model对象,如果已有的List中没有这条数据,则把新对象Add到List中,否则不处理 判断已有的List中是否包含 ...