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 今天在工作中遇到对一个已知的一维数组取出其最大值和最小值,分别用于参与 ...
随机推荐
- isNotNull与isNotEmpty的区别
<isNotNull> 检查属性是否不为null <isNotEmpty> 检查Collection.size()的值,属性的String或String.valueOf()值, ...
- setLayoutParams设置leftMargin后在模拟器上可以真机上不行
LinearLayout.LayoutParams lp = getLayoutParamsFromExit( (LayoutParams) this.getLayoutParams()); ...
- Hadoop上路-01_Hadoop2.3.0的分布式集群搭建
一.配置虚拟机软件 下载地址:https://www.virtualbox.org/wiki/downloads 1.虚拟机软件设定 1)进入全集设定 2)常规设定 2.Linux安装配置 1)名称类 ...
- [大牛翻译系列]Hadoop（14）MapReduce 性能调优：减小数据倾斜的性能损失
6.4.4 减小数据倾斜的性能损失 数据倾斜是数据中的常见情况.数据中不可避免地会出现离群值(outlier),并导致数据倾斜.这些离群值会显著地拖慢MapReduce的执行.常见的数据倾斜有以下几类 ...
- Windows C盘格式化或者同平台迁移oracle数据库
我们知道如果是Linux 同平台迁移oracle数据库.只要是安全关闭了数据库,在新机器上创建用户组,配置了环境变量,将数据库安装目录拷贝到对应的目录就好用了. 一直在寻求Windows平台上这类的解 ...
- PyQt4学习笔记1：PyQt4第一个程序
创建一个 PyQt4 一般可以通过很少的步骤完成.通常的方法是用Qt 提供的QtDesigner工具创建界面.使用QtDesigner,可以方便地创建复杂的GUI界面.然后,可以在窗口上创建部件, 添 ...
- 金融系列5《AUTH过程》
INITIALIZE UPDATE: 在安全通道的显式发起期间,INITIALIZEUPDATE命令用于在卡和主机之间传送卡和会话数据.这个命令开始一个安全通道会话的发起. CPURESET() // ...
- Kill 所有MySQL进程
如果在单机上安装了N多mysql数据库单实例,不再使用的情况下,想关闭所有进程,方法很简单的了,哈哈哈. kill -9 `ps -ef|grep DataServer|awk '{print $2} ...
- js 前加分号和感叹号是什么意思？
;!function(){}(); ;!有什么用? 从语法上来开,Javascript中分号表示语句结束,在开头加上,可能是为了压缩的时候和别的方法分割一下,表示一个新的语句开始.所以,如果在一个单 ...
- eclipse下mysql编程
mysql -uroot -p 密码 1:如果/usr/include/mysql路径下不存在头文件请: apt-get install libmysql++安装开发包 2:程序中添加头文件<m ...