HighCharts -教程+例子
Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,


<div id="container" style="min-width:800px;height:400px"></div>
$('#container').highcharts({ //图表展示容器,与div的id保持一致
chart: {
type: 'column' //指定图表的类型,默认是折线图(line)
},
title: {
text: 'My first Highcharts chart' //指定图表标题
},
xAxis: {
categories: ['my', 'first', 'chart'] //指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
}
},
series: [{ //指定数据列
name: 'Jane', //数据列名
data: [1, 0, 4] //数据
}, {
name: 'John',
data: [5, 7, 3]
}]
});
highchart的代码,都是json形式的,易于理解和开发,数据也可以用json来填充,下面举个自己做的例子看一看。
+----------+----------------+----------+-------------+
| store_id | store_name | dur_flow | statis_time |
+----------+----------------+----------+-------------+
| 1 | 上海虹桥店 | 12 | 9:00 |
| 2 | 上海虹桥店 | 32 | 10:00 |
| 4 | 上海虹桥店 | 122 | 11:00 |
| 5 | 上海虹桥店 | 192 | 12:00 |
| 6 | 上海虹桥店 | 325 | 13:00 |
| 7 | 上海浦东店 | 18 | 9:00 |
| 8 | 上海浦东店 | 38 | 10:00 |
| 9 | 上海浦东店 | 78 | 11:00 |
| 10 | 上海浦东店 | 158 | 12:00 |
| 11 | 上海浦东店 | 268 | 13:00 |
| 12 | 上海南京东路店 | 8 | 9:00 |
| 13 | 上海南京东路店 | 18 | 10:00 |
| 13 | 上海南京东路店 | 38 | 11:00 |
| 14 | 上海南京东路店 | 198 | 12:00 |
| 15 | 上海南京东路店 | 438 | 13:00 |
| 16 | 上海南京东路店 | 518 | 14:00 |
| 17 | 上海浦东店 | 398 | 14:00 |
| 18 | 上海虹桥店 | 418 | 14:00 |
+----------+----------------+----------+-------------+
//后台取的数据,一个List<TestChart>
List<TestChart> dat = testChartService.selectStorData();
System.out.println(dat.toString());
writeJson(response, dat);
$(function () {
$.ajax({
type: 'post',
url: '<%=basePath%>storeData',
async: true,
cache: false,
dataType: 'json',
success: function (data) {
/*这种方式可以,但是感觉多次一举了*/
/* var abc = [];
for(var i=0;i<data.length;i++){
var bcd={};
bcd.name=data[i].name;
bcd.data=data[i].data;
abc.push(bcd);
}*/
/*这种方式尽管可以做到,但是毫无疑问太麻烦了!*/
/*取店名(如果col里已经有店名了,就不在放进去,实现去重)*/
var col = [];
for (var i = 0; i < data.length; i++) {
if (col.indexOf(data[i].storeName) > -1) {
continue;
}
col.push(data[i].storeName);
}
/*取时间段,同理*/
var xcate=[];
for (var i = 0; i < data.length; i++) {
if (xcate.indexOf(data[i].statisTime) > -1) {
continue;
}
xcate.push(data[i].statisTime);
}
/*循环取出每个店的所有数据,分店存储为对象,再添加到一个array中,充当series的内容*/
var alldat=[];
for (var j = 0; j < col.length; j++) {
var each={};
var singledat = [];
for (var i = 0; i < data.length; i++) {
if (data[i].storeName == col[j]) {
singledat.push(data[i].durFlow);
}
}
each.name=col[j];
each.data=singledat;
alldat.push(each);
}
console.log(alldat);
$('#container').highcharts({
chart: {
//type=bar为柱图,type=line为线图
type: 'bar',
borderRadius: 6,
borderColor: '#4572A7',
backgroundColor: '#EEEEEE '
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: xcate,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
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: alldat
});
}
});
});
通过上面的一系列做法可以实现根据后台数据生成图表,但是过程比较麻烦,后面再寻求简化的办法。
----未完待续
HighCharts -教程+例子的更多相关文章
- php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子
相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...
- Highcharts教程
Highcharts特性: 兼容性 - 支持所有主流浏览器和移动平台(android.iOS等). 多设备 - 支持多种设备,如手持设备 iPhone/iPad.平板等 免费使用 - 开源免费 轻量 ...
- android highcharts 柱状图例子
android提供achartengine api 只能做简单的,如果是复杂的图表,个人的想法结合highcharts来完成:减小工作量,官方提供的例子也非常丰富. 通过android webview ...
- 转+更新 Graphviz 教程,例子+ 高级应用 写代码,编程绘制架构图(分层拓扑图) 转自官网
1. Graphviz介绍 Graphviz是大名鼎鼎的贝尔实验室的几位牛人开发的一个画图工具. 它的理念和一般的“所见即所得”的画图工具不一样,是“所想即所得”. Graphviz提供了dot语言来 ...
- 一个Highcharts的例子
关键字:Highcharts <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...
- Highcharts教程2
参数配置(属性+事件) chart.events.addSeries:添加数列到图表中. chart.events.click:整个图表的绘图区上所发生的点击事件. chart.events.load ...
- highcharts钻取例子
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
- Highcharts教程--把js代码从html中抽离出来,放到单独的一个js文件中。由html页面调用
1.html页面写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 【HighCharts系列教程】一、认识Highcharts
一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...
随机推荐
- 更新Android SDK之后Eclipse提示ADT版本过低的一个简易解决办法
首先说明一下发表这一篇博文的“历史原因”吧,因为在更新SDK之后,进入Eclipse设置Android SDK目录的时候,会突然说我的版本低什么的,尝试自己解决但失败之后,我在搜索引擎上找了很多中文的 ...
- 【POJ】1269 Intersecting Lines(计算几何基础)
http://poj.org/problem?id=1269 我会说这种水题我手推公式+码代码用了1.5h? 还好新的一年里1A了---- #include <cstdio> #inclu ...
- C#获取机器码(转)
/// <summary> /// 机器码 /// </summary> public class MachineCode { /// ...
- Linux环境下实现哲学家就餐问题(2)
#include <stdio.h> #include <pthread.h> #include <stdlib.h> #include <string.h& ...
- require(__DIR__ . "/../sss.php"
魔法函数 __DIR__ 是 php5.2以后新加的函数,返回当前文件所在的目录,返回的目录不带 \,所以上边的意思是:Require当前目录的父目录中的 sss.php
- 解决main No MyBatis mapper was found in 的警告
在集成Spring + mybaits时出现以下警告 org.mybatis.spring.mapper.MapperScannerConfigurer$Scanner.main No MyBatis ...
- AC之路开始了~
已经进行了半年ACM的学习啦~虽然实力很弱但是仍然快快乐乐的慢慢学习... 新建了我的博客~ 记录A题经验 感悟学习点滴~ 加油~
- 20145235 《Java程序设计》第10周学习总结
教材学习内容总结 网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 程序员所作的事情就是把数据发 ...
- CentOS 6 RPM安裝python 2.7
先说第一种方法,通过rpmbuild编译XXX.src.rpm包([1].[2]): 安装依赖:sudo yum install -y make autoconf bzip2-devel db4-de ...
- centos6.5 扩容
#查看挂载点: df -h #显示: 文件系统 容量 已用 可用 已用%% 挂载点 /dev/mapper/vg_dc01-lv_root 47G 12G 34G % / tmpfs 504M 88K ...