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 今天在工作中遇到对一个已知的一维数组取出其最大值和最小值,分别用于参与 ...
随机推荐
- ThreadLocal学习记录
ThreadLocal简介 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它线程所对应的 ...
- javascript里面技巧整理
web develop tools secrets: http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/ 1.Date new Date( ...
- 【Qt】Qt之自定义界面（添加自定义标题栏）【转】
简述 通过上节内容,我们实现了自定义窗体的移动,但是我们缺少一个标题栏来显示窗体的图标.标题,以及控制窗体最小化.最大化.关闭的按钮. 自定义标题栏后,所有的控件我们都可以定制,比如:在标题栏中添加换 ...
- SequoiaDB数据库集群部署
一般在多机环境下部署数据库的集群模式是比较繁琐的,下面我来分享一个如何通过shell脚本的方式简单.方便地部署我们的集群. 首先,我们要给机器配置信任关系,这样我们就无需手动的输入密码来执行ssh和s ...
- linux系统版本查看命令
发布:theboy 来源:net [大 中 小] 查看linux系统版本的命令 有如下命令可供参考: # lsb_release -a LSB Version: :core-3.1-ia ...
- DML,DDL,DCL,DQL的区别
DML 英文缩写 DML = Data Manipulation Language,数据操纵语言,命令使用户能够查询数据库以及操作已有数据库中的数据的计算机语言.具体是指是UPDATE更新.INS ...
- RGB颜色二值化
原理:RGB颜色根据计算'灰度'的公式,可以转化为黑白2种颜色,实现二值化. 业务场景的应用:可以根据背景颜色,取一个黑色或白色的颜色,作为背景色上的文案字体颜色 具体代码: function get ...
- Elastix 禁用SSL（https），还原为 http 访问
1.相关配置文件目录: Apache的配置文件:httpd.conf,位于:/etc/httpd/conf/httpd.conf,配置文件中包含 Include conf.d/*.conf ,引入了 ...
- mac常用设置
1.修改mac主机名 系统偏好设置->共享->电脑名称 ,编辑就可以了. sudo scutil --set HostName hostname 这个是修改主机名 sudo scutil ...
- 如何取消FLEX里模态窗口的毛玻璃效果
在Flex里面,比如使用PopUpManager.createPopUp(this,TipWindow,false)第三个参数设成true 会出现毛玻璃效果让CPU飙升,可不可以改变模态窗口的效果,不 ...