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中,假设数据列不包括数据,会自己主动显示空白. 这样浏览者无法推断当前图表为什么类型.绘制一个空饼图的变通方 ...
随机推荐
- php sso 单点登录的实现 代码示例
先说一下这样做的好处吧,先来三个屌丝域名: www.openpoor.com myspace.openpoor.com passport.openpoor.com 大家都知道,虽然他们都是一个域名但主 ...
- NSIndexPath 延伸
转载自:http://my.oschina.net/u/2560887/blog/602095?fromerr=Dy4vj5Jd 这个类的实例描述了一个嵌套数组中特定节点的路径,一般叫做索引路径.1. ...
- C++的精髓——虚函数
虚函数为了重载和多态的需要,在基类中是由定义的,即便定义是空,所以子类中可以重写也可以不写基类中的函数! 纯虚函数在基类中是没有定义的,必须在子类中加以实现,很像java中的接口函数! 虚函数 引入原 ...
- POJ 2186 Popular Cows tarjan缩点算法
题意:给出一个有向图代表牛和牛喜欢的关系,且喜欢关系具有传递性,求出能被所有牛喜欢的牛的总数(除了它自己以外的牛,或者它很自恋). 思路:这个的难处在于这是一个有环的图,对此我们可以使用tarjan算 ...
- CDN(转载)
CDN是什么? 谈到CDN的作用,可以用8年买火车票的经历来形象比喻: 8年前,还没有火车票代售点一说,12306.cn更是无从说起.那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火 ...
- 如何用好 Google 搜索引擎?
1.双引号 把搜索词放在双引号中,代表完全匹配搜索,也就是说搜索结果返回的页面包含双引号中出现的所有的词,连顺序也必须完全匹配.bd和Google 都支持这个指令.例如搜索: “seo方法图片” 2. ...
- Java 堆内存(Heap)[转]
将jvm内存很不错的文章,转自 堆(Heap)又被称为:优先队列(Priority Queue),是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复 ...
- C#入门经典第四章-流程控制-1
布尔类型:
- struts2整合spring应用实例
我们知道struts1与spring整合是靠org.springframework.web.struts.DelegatingActionProxy来实现的,以下通过具体一个用户登录实现来说明stru ...
- IE6下最小19px像素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...