highcharts 柱状图动态设置数据应用实例
<div id="container" style="min-width:700px;height:400px"></div>
#javascript# $("#container").highcharts({
chart: {
type: 'column'
},
credits: {//去掉 highcharts.com
enabled:false
},
colors: ['#7cb5ec','#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
title: {
text: '平台品牌数据',
style:{
color:'#8085e8'
}
},
subtitle: {
text: '电子商务公司'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (个)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{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
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: []
}); // 动态获取数据并设置
$.ajax({
type: 'get',
url: '<?php echo site_url()?>/analysesdata/Brandarea/test',
data: '',
dataType: 'json',
success: function (data) { var brand = new Array();
brand = ("招商,善融,建行,工商,民生,淘宝,邮乐,一卡通").split(',');
console.info(brand); //设置统计数据
var brand_chart = $("#container").highcharts(); //设置x轴数据
brand_chart.xAxis[0].setCategories(['苹果', '三星', '小米', '华为', '魅族']); //设置柱状图数据
var i=0;
$.each(brand,function (key, val) { //设置 X 数据
brand_chart.addSeries({name:val,data:eval("([" + data[val] + "])")});
//alert(brand_chart.series[i].name);
//brand_chart.series[i].setData(eval("([" + data[val] + "])")); i++;
}); // brand_chart.series[i].setData(eval("([" + data['招商'] + "])"));
//brand_chart.series[0].setData(eval("([60, 71.15, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])")); } });
静态设置series数据 :X轴
series: [ {
name: '招商',
data: [],
dataLabels: {
enabled: true,
rotation: -90,
color: '#90ed7d',
align: 'top',
x: 4,
y: -10,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 0px black'
}
} }, {
name: '善融',
data: [83.6, 78.8, 98.5, 93.4, 106.0] }, {
name: '建行',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
}, {
name: '工商',
data: [42.4, 33.2, 34.5, 39.7, 52.6],
dataLabels: {
enabled: true,
rotation: -90,
color: '#666666',
align: 'top',
x: 4,
y: -10,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 0px black'
}
} },{
name:'民生',
data:[]
},{
name:'淘宝',
data:[]
},{
name:'邮乐',
data:[]
},{
name:'一卡通',
data:[]
}
]
highcharts 柱状图动态设置数据应用实例的更多相关文章
- highcharts 柱状图 动态加载
highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...
- highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说). 柱状图的动态传值: //获取后台数据 va ...
- 基于ssh框架的highcharts前后台数据交互实例
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...
- EF数据迁移,未将对象引用设置到对象实例
现象: 执行Enable-Migrations -force时就报"未将对象引用设置到对象实例"的异常: DbProviderServicesExtensions.GetProvi ...
- activiti7启动流程实例,动态设置assignee人
package com.zcc.activiti03; import org.activiti.engine.ProcessEngine;import org.activiti.engine.Proc ...
- 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态
0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...
- highCharts 饼图动态加载
饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...
- DevExpres表格控件运行时动态设置表格列
本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...
- Activiti动态设置办理人扩展
关键词:Assignee.Candidate users.Candidate groups:setAssignee.taskCandidateUser.taskCandidateGroup 主要解决问 ...
随机推荐
- C++字符串分割
//字符串分割函数 std::vector<std::string> split(std::string str,std::string pattern) { std::string::s ...
- PHP开发框架[国内框架]
1.Thinkphp http://thinkphp.cn/ 2.Brophp http://www.brophp.com/zf/ 由LAMP兄弟连打造 3.WindFramework http ...
- 01-08-01【Nhibernate (版本3.3.1.4000) 出入江湖】NHibernate中的一级缓存
缓存的范围? 1.事务范围 事务范围的缓存只能被当前事务访问,每个事务都有各自的缓存,缓存内的数据通常采用相互关联的对象形式.缓存的生命周期依赖于事务的生命周期,只有当事务结束时,缓存的生命周期才会结 ...
- sigleSchool 存储过程例1
CREATE OR REPLACE PROCEDURE SINGLSCHOOL( PICIID IN VARCHAR2, SCHOOLID IN NUMBER, SCHETYPE IN number, ...
- Chp14: Java
1.finally keyword: finally keyword is used in association with a try/catch block and guarantees that ...
- hdoj 1102 Constructing Roads
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1102 分析:看到这题给出的都是矩阵形式,就知道了可以用Prim算法求MST. #include <i ...
- Biba模型简介
上周上信息安全的课,老师留了个Biba模型的作业.自己看书了解了一下,记录如下. 参考资料:石文昌<信息系统安全概论第2版> ISBN:978-7-121-22143-9 Biba模型是毕 ...
- Fragment 与 Activity 通信
先说说背景知识: (From:http://blog.csdn.net/t12x3456/article/details/8119607) 尽管fragment的实现是独立于activity的,可以被 ...
- 李洪强漫谈iOS开发[C语言-009] - C语言关键字
// // main.m // 04 - C语言关键字 // // Created by vic fan on 16/7/12. // Copyright © 2016年 李洪强. All r ...
- 欧拉工程第63题:Powerful digit counts
题目链接 The 5-digit number, 16807=75, is also a fifth power. Similarly, the 9-digit number, 134217728=8 ...