highcharts柱状图和饼图的数据填充
1、其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端;前端再做一下连接处理等就行了。
$('#program_statistics_bar').highcharts({
chart: {
type: 'bar'
},
title: {
text: bar_title
},
exporting :{
url:'../../plugin common/Highcharts-3.0.9/exporting-server/php/php-batik/index.php',
width:1000
},
xAxis: {
categories: (function() {
var temp_data = []; for (var key in bar_data)
{
if ('undefined' != typeof(bar_prog_name[key]))
{
temp_data.push(bar_prog_name[key].toString() + '( ' + key.toString() + ' )');
}
else
{
temp_data.push(key.toString());
}
} return temp_data;
})()
},
yAxis: {
min: 0,
title: {
text: 'View Count' + '( ' + bar_type + ' : ' + number + ' )',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' times'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: (function() {
var obj = new Object();
var view_count = [];
var temp_data = []; for (var key in bar_data)
{
view_count.push(bar_data[key]);
} obj['name'] = "View Count";
obj['data'] = view_count; temp_data.push(obj);
return temp_data;
})()
});
$('#program_statistics_pie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
colors:[
'#DDDDDD',
'#FF88C2',
'#FF8888',
'#FFA488',
'#FFBB66',
'#FFDD55',
'#FFFF77',
'#DDFF77',
'#66FF66',
'#77FFEE',
'#77DDFF',
],
title: {
text: pie_title
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Views',
data: (function() {
var temp_data = []; for (var key in pie_data)
{
if ('undefined' != typeof(pie_prog_name[key]))
{
arr = [pie_prog_name[key] + '( ' + key + ' )', pie_data[key]];
}
else
{
arr = [key, pie_data[key]];
} temp_data.push(arr);
} return temp_data;
})()
}]
});
highcharts柱状图和饼图的数据填充的更多相关文章
- highcharts柱状图实现legend和数据列一一对应效果
var cate = ['Green', 'Pink']; Highcharts.chart('container', { chart: { type: 'column' }, legend: { e ...
- 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图
开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...
- 【Highcharts】 绘制饼图和漏斗图
1.outModel类设计 设计outModel类首先研究下Highcharts中series的data数据格式,发现饼图和漏斗图都可以使用这样格式的数据 series: [{ name: 'Uniq ...
- highcharts 柱状图 动态加载
highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...
- Highcharts下载与使用_数据报表图
Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...
- ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中
本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641 1.导入包,搭建SSH框架 导入Jquery的JS包,<sc ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- MATLAB之折线图、柱状图、饼图以及常用绘图技巧
MATLAB之折线图.柱状图.饼图以及常用绘图技巧 一.折线图 参考代码: %图1:各模式直接成本预测 %table0-table1为1*9的数组,记录关键数据 table0 = data_modol ...
- Highcharts构建空饼图
Highcharts构建空饼图 空饼图就是不包括不论什么节点的饼图. 在Highcharts中,假设数据列不包括数据,会自己主动显示空白. 这样浏览者无法推断当前图表为什么类型.绘制一个空饼图的变通方 ...
随机推荐
- OpenGL ES着色器语言之语句和结构体(官方文档第六章)内建变量(官方文档第七、八章)
OpenGL ES着色器语言之语句和结构体(官方文档第六章) OpenGL ES着色器语言的程序块基本构成如下: 语句和声明 函数定义 选择(if-else) 迭代(for, while, do-wh ...
- .bash_profile和.bashrc的什么区别
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置./etc/bashrc:为每一个运 ...
- c++ 日志操作
程序需要一个简单的日志类,为此简单学习了Boost.Log和google的glog,前者功能非常强大,后者非常小巧但是不够灵活,最终打算自己写一个. 环境: win7 32位旗舰版.VS2010旗舰版 ...
- 将所需要的图标排成一列组成一张图片,方便管理。li的妙用
我在做一个网站的header 但是视频教学里面将电话图标,微信图标,以及每一个英文字母右边的小点拼成一副图. (图片的名字是top_ioc.png)拼成的整个图片作为li的背景.通过移动就可以分别将每 ...
- 【转载】GDI 映像方式 之 SetViewportOrgEx 与 SetWindowOrgEx 解析
SetViewportOrgEx 与 SetWindowOrgEx 解析 这两个函数,用来改变视端口和窗口的原点,并都具有改变轴的效果,以致(0,0)不再指左上角. 「视端口」是依据设备坐标(图素)的 ...
- IIS Express允许外部访问(外部调试)
Visual Studio配合IIS Express为Web开发提供了强劲的调试功能,本文介绍IIS Express如何在调试模式下让局域网的其他设备进行访问,以便进行测试. 1.打开IIS Expr ...
- HDU 1890 Robotic Sort | Splay
Robotic Sort Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) [Pr ...
- Kyoto Cabinet--nosql型单机数据库
摘要: Kyoto Cabinet是轻量级nosql型本地内存数据库 简介 Kyoto Cabinet是一个数据库管理的 lib,是 Tokyo Cabinet 的改进版本.数据库是一个简单的包含记录 ...
- 提升html5的性能体验系列之三流畅下拉刷新
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- java.lang.ClassCastException: com.sun.proxy.$Proxy8 cannot be cast to com.bjsxt.service.UserServiceImpl01_AOP.
对于Spring AOP 采用两种代理方法,一种是常规JDK,一种是CGLIB,我的UserDao了一个接口IUserDao,当代理对象实现了至少一个接口时,默认使用 JDK动态创建代理对象,当代理对 ...