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 今天在工作中遇到对一个已知的一维数组取出其最大值和最小值,分别用于参与 ...
随机推荐
- NSS_09 gridpanel中的actioncolumn事件
在设计角色权限时, 终于用到了grid的actioncolumn,如下: { header: '权限设定', xtype: 'actioncolumn', items: [{ icon: 'Conte ...
- 基础学习总结（四）---内存获取、XML之PULL解析
外部项目引入如果没找到工程文件要先创建一个android项目在引入. 根据要查看的项目名在项目中搜索逐步查看 ==================== 内存详情获取: public class Mai ...
- js----DOM的三大节点及部分用法
DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操 ...
- 在项目中 background transiton 带来的"便利"与“坑”
本文就两个例子跟大家分享一下background-image与background-size的渐变(transition)所带来的方便与“深坑” 首选,说说这东西好的地方,有时候在做PC项目的时候,可 ...
- struts2 知识梳理
写此文章时,最新struts2版本:2.3.6 一:struts.xml配置详解: 1.<include> 表示引入其他配置文件 2.<constant> 定义常量 3.< ...
- Mac OS + Nginx + Mysql + PHP 本地环境搭建
本文是用Mac系统下搭建的环境,使用Linux的童鞋也不要在意,因为很相似,只有下载安装的方式有一点区别.直接进入正文: 1.首先我们需要下载Homebrew,Homebrew简称brew,是Mac ...
- Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程
这篇文章主要介绍了Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程,需要的朋友可以参考下 准备篇 一.环境说明: 操作系统:Windows Server 201 ...
- C#项目连接数据库的配置
一:C# 连接SQL数据库 1.用SqlServer数据库,windows身份验证模式<add name="TestSqlSqever" providerName=&q ...
- python杂记-5(装饰器)
1.被装饰的函数有参数(一个参数): def w1(func): def inner(arg): # 验证1 # 验证2 # 验证3 return func(arg) return inner @w1 ...
- java基础之java基本数据类型
1.Java数据类型基本概念: 数据类型在计算机语言里面,是对内存位置的一个抽象表达方式,可以理解为针对内存的一种抽象的表达方式.接触每种语言的时候,都会存在数据类型的认识,有复杂的.简单的,各种数据 ...