highcharts 柱状图 动态加载
highcharts柱状图动态加载
(1):导入样式
<script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/highCharts/highcharts.js"></script>
(2):代码
<script type="text/javascript">
var oChart;
var oOptions;
var rntData;
oOptions = {
chart: {
renderTo: 'container', //将饼图渲染到container容器中,页面中需有一个id为container的div
type: 'column'//图表类型 column-柱状图 pie-饼图 line表示折线型(默认)spline表示曲线型areaspline表示曲线区域型
},
title: {
text: '公司地址分布图'//主标题
},
subtitle: {
text: '---------'//副标题
},
xAxis: {
type: 'category',//轴的类型
labels: {
//rotation: 20,倾斜度
style: {
fontSize: '13px',
//fontFamily: 'Verdana, sans-serif'
}
},
//设置x轴text文本
//categories:[]
},
yAxis: {
min: 0,
title: {
text: '人数'
}
},
legend: {
enabled: true
},
column:{
dataLabels:{
enabled:true, // dataLabels设为true
style:{
color:'#D7DEE9'
}
}
},
//绑定鼠标放上后显示的字段
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.1f} 人</b>',
shared: false,//节点数据框共享
enabled: true,//每个节点显示数据框
formatter: function() {//格式化每个节点数据框
//return '<b>'+ this.x +'</b><br>'+ this.series.name +': '+ this.y;
return '<b>'+ this.series.name +'</b>入职人数: <b>'+ this.y +'</b>人';
}
},
series: []
}
$(document).ready(function(){
oChart = new Highcharts.Chart(oOptions);
//异步动态加载数据列
LoadSerie_Ajax();
});
//异步读取数据并加载到图表
function LoadSerie_Ajax() {
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
//oChart.showLoading();
$.ajax({
url :
'<%=request.getContextPath()%>/charts/getCharts.action?startTime='+startTime+"&endTime="+endTime,
type : 'POST',
dataType : 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success : function(rntData){
for(var i in rntData){
var oSeries = {
name:rntData[i].dname, //该 name 是data数值的名称
pointPadding: 0, //数据点之间的距离值
groupPadding: 0, //分组之间的距离值
borderWidth: 20,
shadow: true,
pointWidth:5, //柱子之间的距离值
data: eval("[" + rntData[i].count + "]") // series的data接受json数组
};
oChart.addSeries(oSeries);//将对象添加到series中
}
}
});
oChart.hideLoading();
}
</script>
(3)html代码
<div id="container" style="width:800px;height: 400px;margin-top: 80px;margin-left: 330px;"></div>
根据以上的配置可以实现柱状图的动态调用。
如果需要再加条件查询时,页面加载后需要清空上一次的数据,将data数组的length长度设置为0;
highcharts 柱状图 动态加载的更多相关文章
- highCharts 饼图动态加载
饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- js动态加载css和js
之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...
- geotrellis使用(二十三)动态加载时间序列数据
目录 前言 实现方法 总结 一.前言 今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...
- Ext JS 如何动态加载JavaScript创建窗体
JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...
- Ext动态加载Toolbar
在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...
- Android动态加载框架汇总
几种动态加载的比较 1.Tinker 用途:热修复 GitHub地址:https://github.com/Tencent/tinker/ 使用:http://www.jianshu.com/p/f6 ...
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
随机推荐
- C# 获取当前操作系统是32位还是64位
注:判断整型的长度的方式,只有在AnyCPU编译模式下才有用.因此更好的办法是获取真的地址总线位宽(使用WMI,windows management instruementation). .NET 2 ...
- Eclipse debug高级技巧(转)
Debug视图 认识debug视图,红色部分框为线程堆栈视图,黄色部分框为表达式.断点.变量视图,蓝色部分为代码视图. 线程堆栈视图 分别介绍一下这几个按钮的含义: 1.表示当前实现继续运行直到下一个 ...
- day27_面向对象进阶
飒飒 : . . . . 六.描述符 1 描述符是什么:描述符本质就是一个新式类,在这个新式类中,至少实现了__get__(),__set__(),__delete__()中的一个,这也被称为描述符协 ...
- mysql5.5 物理删除binlog文件导致的故障
故障现象: 中午12点多,一套主从集群的主库因为没有配置大页内存,发布时导致OOM,MYSQL实例重启了,然后MHA发生了切换.切换过程正常.切换后需要把原master配置成新master的slave ...
- SQL的OPENROWSET开启和使用方法
[转载]SQL的OPENROWSET开启和使用方法 1.开始 -> 所有程序 -> Microsoft SQL Server 2005 -> 配置工具 -> SQL Se ...
- OAF_开发系列21_实现OAF事物控制TransactionUnitHelper(案例)
20150716 Created By BaoXinjian
- WinRAR压缩操作帮助类
//------------------------------------------------------------------------------------- // All Right ...
- emacs不能使用中文输入法
参考 http://blog.csdn.net/nomasp/article/details/52138501 根据Fcitx的介绍:当LC_CTYPE为英文时,在Emacs上可能无法使用输入法. : ...
- seo高级指令
1.双引号:完全匹配2.减号(-):代表搜索不包含减号后面的启事的页面3.星号(*):是常用的通配符,百度不支持4.inurl:指令用于搜索查询词出现在URL中的页面5.inanchor:指令返回的结 ...
- 实例存储支持的AMI创建步骤
实例存储支持的AMI创建步骤 一.Windows AMI 1. 选择实例存储支持的AMI创建实例. 2. 远程登录实例进行定制化配置. 3. 通过Web控制台或命令行Bundle实例(并自动上传到S3 ...