转 HighCharts笔记之: Bar Chart
最近需要做一些Web图标,研究了几个开源的第三方工具后,最后决定使用HighCharts开发:
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持 的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外 HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。
HighCharts 可以通过JSON 数据格式与后台交互,从而生成动态的图表。但是在官方的文档中关于 JSON 数据格式的资料很少,经过一下午的调试终于找到了关于柱状图和饼图的数据格式,在这里记录一下,以备后续的查询:
柱状图:
JSON Data Format
[
{
"data":[0,0,0,0,0,0,0,0,9,0,0,1],
"name":"Actual"
},
{
"data":[1,1,1,4,1,1,1,1,12,1,3,6],
"name":"Target"
}
]
Javascript Code
<script type="text/javascript">
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Activity Entry', 'Activity Update', 'Blog Entry', 'Blog Comments', 'Feed','Bookmark','File','Forum Topic','Forum Reply','Wiki','Ram','Liquid'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Units',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: []
};
$.getJSON('<c:url value="/action.do?method=barChart"/>', function(json) {
options.series = json;//options.series.push(json);
//console.log("JSON: " + JSON.stringify(options));
//console.log("Render to element with ID : " + options.chart.renderTo);
//console.log("Number of matching dom elements : " + $("#" + options.chart.renderTo).length);
new Highcharts.Chart(options);
}).error(function() {console.log('error');});
$("a[data-toggle=modal]").click(function(){
var target = $(this).attr('data-target');
var url = $(this).attr('href');
$(target).innerHTML='';
$(target).load(url);
});
});
</script>
HTML Code
<div id="container" style="width: 100%; height: 400px"></div>
Java Code - action
public ActionForward barChart(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
List<Bar> resultList = getBarData();
JSONArray json = new JSONArray(resultList);
String result = json.toString();// 转成json数据
PrintWriter out = response.getWriter();
out.write(result);
out.flush();
out.close();
return null;
}
private List<Bar> getBarData() {
BlueCommunity target = dao.getLatestTarget();
BlueCommunity actual = dao.sumLatestActual();
List<Bar> resultList = new ArrayList<Bar>();
if (actual != null) {
resultList.add(new Bar("Actual", actual.getValueArray()));
} else {
resultList.add(new Bar("Actual", new int[] { 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0 }));
}
resultList.add(new Bar("Target", target.getValueArray()));
return resultList;
}
Java Code - Bar class
public class Bar {
private static final long serialVersionUID = 6461863786317563773L;
private String name;
private int[] data;
public Bar() {
};
public Bar(String name, int[] data) {
this.name = name;
this.data = data;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int[] getData() {
return data;
}
public void setData(int[] data) {
this.data = data;
}
}
Java Code - Community class
public class Community implements Serializable {
private static final long serialVersionUID = -7516165631503337884L;
private int id;
private int version;
private String remark;
private int activity_entry;
private int activity_update;
private int blog_entry;
private int blog_comments;
private int feed;
private int bookmark;
private int file;
private int forum_topic;
private int forum_reply;
private int wiki;
private int iRam;
private int liquid;
private int user;
...
getters;
setters;
...
public int[] getValueArray() {
int[] array = { activity_entry, activity_update, blog_entry,
blog_comments, feed, bookmark, file, forum_topic, forum_reply,
wiki, iRam, liquid };
return array;
}
}
转 HighCharts笔记之: Bar Chart的更多相关文章
- Highcharts - Bar Chart & Column Chart
1. 条形图(Bar Chart)需要的数据格式类型如下: ["Luke Skywalker", "Darth Vader", "Yoda" ...
- Bar Chart of Frequency of modals in different sections of the Brown Corpus
Natural Language Processing with Python Chapter 4.8 colors = 'rgbcmyk' # red, green, blue, cyan, mag ...
- Matplotlib之Bar Chart
Matplotlib之Bar Chart: import numpy as np import matplotlib.pyplot as plt data = [[300, 200, 250, 150 ...
- Relative-Frequency|frequency|pie chart |bar chart
2.2Organizing Qualitative Data The number of times a particular distinct value occurs is called its ...
- bubble chart|Matrix Scatter|Overlay Scatter|Scatterplots|drop-line|box plot|Stem-and-leaf plot|Histogram|Bar chart|Pareto chart|Pie chart|doughnut chart|
应用统计学 对类别数据要分类处理: Bar chart复式条形图便于对比: Pareto chart:对类别变量依据频数高低排列: Pie chart:饼图用于一个样本,可以区分类别数据 doughn ...
- matplotlib 柱状图 Bar Chart 样例及参数
def bar_chart_generator(): l = [1,2,3,4,5] h = [20, 14, 38, 27, 9] w = [0.1, 0.2, 0.3, 0 ...
- Bar Chart _Study
---恢复内容开始--- 以“3D BarChart”为例. 1.Select a theme.(选择一个主题模板) 2.Set up categories and groups.(设置类型和组) 3 ...
- plot bar chart using python
Example import matplotlib.pyplot as plt import plotly.plotly as py # Learn about API authentication ...
- Matplotlib学习---用matplotlib画柱形图,堆积柱形图,横向柱形图(bar chart)
这里利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://datasets.flowingdata.com/hot-dog-cont ...
随机推荐
- 50 Android Hacks阅读笔记
Hack 1.善用weightSum和layout_weight. 问题提出:尝试做一个button的宽度是父View的一半的效果. 关键词:weightSum = 1 , layout_weight ...
- SQL Server技术问题之游标优缺点
分类: MS SQL SERVER 支持三种类型的游标:Transact_SQL 游标,API 服务器游标和客户游标. (1) Transact_SQL 游标 Transact_SQL 游标是由DEC ...
- 【Android进阶系列教程】前言
起因 因为初学Android的时候还没有写博客的意识,现在Android的门是入了,正在进阶的道路上行走,但是就这一路也走了不少的弯路.我想,总得来说Android入门还是比较容易的,网络资源比较丰富 ...
- Winform开发框架的重要特性总结
从事Winform开发框架的研究和推广,也做了有几个年头了,从最初的项目雏形到目前各种重要特性的加入完善,是经过了很多项目的总结归纳和升华,有些则是根据客户需要或者应用前景的需要进行的完善,整个Win ...
- C#中部分方法返回值类型为什么只能是void?
这个问题答案选至<C#入门经典> 如果方法具有返回类型,那就可以作为表达式的一部分: x=Manipulate(y,z); 如果没有给部分方法提供实现代码,编译器就会在使用该方法的所有地方 ...
- JMS学习(二)- JMS Message Model 组成介绍及消息头详解
一.前言 从本文起依次详细介绍JMS中的一些重要的概念,主要参考了官方的JMS1.1的文档,该文档很老了,是02年的,那年,JAVA还没有被Oracle收购..本文主要介绍Message及其相关概念, ...
- java多线程(一)——线程安全的单例模式
概念: java中单例模式是一种常见的设计模式,单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种. 单例模式有一下特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3. ...
- 一个小笔记(7):EN_1
For nearly ten years, the Unified Modeling Language(UML) has been the industry standard for visualiz ...
- T-SQL的回车和换行符(SQL)
T-SQL的回车和换行符(SQL) sql server中的回车换行字符是 char(13)+char(10) 回车:char(13) 换行:char(10) 实例1: DECLARE @c NVA ...
- Oracle 查询并删除重复记录的SQL语句
查询及删除重复记录的SQL语句 1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from peoplewhere peopleId in (select ...