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 chart;
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
//常规图表选项设置
chart: {
renderTo: 'container', //在哪个区域呈现,对应HTML中的一个元素ID
plotBackgroundColor: null, //绘图区的背景颜色
plotBorderWidth: null, //绘图区边框宽度
plotShadow: false //绘图区是否显示阴影
},
//图表的主标题
title: {
text: '公司比例图'
},
//当鼠标经过时的提示设置
tooltip: {
pointFormat: '<h2>{series.name}</h2>: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
//每种图表类型属性设置
plotOptions: {
//饼状图
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
//Highcharts.numberFormat(this.percentage,2)格式化数字,保留2位精度
return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
//图表要展现的数据
series: [{
type: 'pie',
name: '比率'
}]
});
});
getData();
});
/* $(function(){
$('.form_datetime').datetimepicker({
minView: "month", //选择日期后,不会再跳转去选择时分秒
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 1,
autoclose: 1,
});
$("#button").click(function(){
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
if(startTime != '' && endTime != ''){
if(confirm("确定要查询日期"+startTime+"至"+endTime)){
//myLineChart.destroy();
getData();
}
}else{
alert("请正确输入");
}
});
});*/
function getData(){
//var startTime = $("#startTime").val();
//var endTime = $("#endTime").val();
//异步请求数据
$.ajax({
type:"GET",
url:"<%=request.getContextPath()%>/charts/getChartsPie.action?startTime="+startTime+"&endTime="+endTime ,
dataType:'json',
success:function(data){
if(data == ''){
alert("亲,请重新选择正确的时间");
}else{
//定义一个数组
browsers = [],
//迭代,把异步获取的数据放到数组中
$.each(data,function(i,d){
browsers.push([d.type,d.dataCount]);
});
//设置数据
chart.series[0].setData(browsers);
}
},
error:function(e){
alert(e);
}
});
}
</script>
(3)html代码
<div id="container" style="min-width: 400px; height: 400px;margin-bottom: 150px"></div>
highCharts 饼图动态加载的更多相关文章
- highcharts 柱状图 动态加载
highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...
- 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,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- html中的图像动态加载问题
首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...
- 非常郁闷的 .NET中程序集的动态加载
记载这篇文章的原因是我自己遇到了动态加载程序集的问题,而困扰了一天之久. 最终看到了这篇博客:http://www.cnblogs.com/brucebi/archive/2013/05/22/Ass ...
随机推荐
- Base64加密工具-iBlogs
简易的Base64加密工具开发步骤 1.编写Java测试桩 import java.io.BufferedReader; import java.io.IOException; import java ...
- Effective Java学习笔记
创建和销毁对象 第一条:考虑用静态工厂方法替代构造器 For example: public static Boolean valueOf(boolean b){ return b ? Boolean ...
- 【python】调用机器喇叭发出蜂鸣声(Beep)
##coding:utf-8 import winsound winsound.Beep(600,6000) #其中600表示声音大小,1000表示发生时长,1000为1秒
- ios 写项目的时候遇到的问题及解决方案(2)
11.自适应文本高度 NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:]}; CGRect rec ...
- loss function与cost function
实际上,代价函数(cost function)和损失函数(loss function 亦称为 error function)是同义的.它们都是事先定义一个假设函数(hypothesis),通过训练集由 ...
- C#矩阵运算类库
这个类库是本人参考许多相关资料之后做出的C#矩阵运算类库,因为C#的数值计算库相对比较少,所以希望这个类库能够给大家带来一些帮助. 源码github网址:https://github.com/Josh ...
- golang
Golang, 以17个简短代码片段,切底弄懂 channel 基础 (原创出处为本博客:http://www.cnblogs.com/linguanh/) http://www.cnblogs.co ...
- Stanford NLP 学习笔记2:文本处理基础(text processing)
I. 正则表达式(regular expression) 正则表达式是专门处理文本字符串的正式语言(这个是基础中的基础,就不再详细叙述,不了解的可以看这里). ^(在字符前): 负选择,匹配除括号以外 ...
- require.js
日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...
- 【原创】Java批量反编译利器(jd-gui)介绍
Java反编译利器(jd-gui)介绍 当要做白盒测试或安全测试时,我们需要借助工具扫描被测代码,相信大家都遇到过没有源代码,而需要反编译的情形吧,也可能大家用过jad工具,我这里介绍下方便的工具jd ...