Ⅰ 实现Echarts中数据的动态获取
1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表:
(这里就直接贴上代码了,直接用的是官网教程里异步数据加载和更新里的代码)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
</script>
</body>
</html>
看到了吧,现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。
下面贴上补充了ajax部分的完整前端代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names=[]; //类别数组(实际用来盛放X轴坐标值)
var nums=[]; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "TestServlet", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
2.服务器端Servlet接收请求
客户端的请求url是’TestServlet‘,那我们得先在web.xml配置以下映射:
<servlet>
<servlet-name>TestServlet</servlet-name>
<servlet-class>test.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>
然后就来着手写处理客户端请求的TestServlet啦!
3.生成json数据并返回给客户端
生成Json数据要用到额外的jar包,这里我使用的jackson,json-lib 2010年就没有再更新了… (2016-5-3日更:发现Google出品的Gson也蛮好用的,重点是很小巧,只需引入一个jar就搞定,用法也很简单)
简单介绍一下jackson的用法:
①:先去http://mvnrepository.com/下载 jackson-core.jar,jackson-annotations.jar,jackson-databind.jar(都是2.x版本,jackson官网不知为何不提供服务了…这三个jar让我一阵好找)
②:在项目的项目WEB-INF/lib下引入这三个jar
然后就可以在TestServlet里使用jackson提供的工具类了。(关于jackson的详细用法,这里贴一下官网教程:http://wiki.fasterxml.com/JacksonInFiveMinutes)
TestServlet代码如下:
package test;
import java.io.IOException;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Proct> list = new ArrayList<Proct>();
//这里把“类别名称”和“销量”作为两个属性封装在一个Proct类里,每个Proct类的对象都可以看作是一个类别(X轴坐标值)与销量(Y轴坐标值)的集合
list.add(new Proct("衬衣", 10));
list.add(new Proct("短袖", 20));
list.add(new Proct("大衣", 30));
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组
//System.out.println(json);
//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}
TestServlet类中用到的自定义的Proct类代码如下:
package test;
public class Proct {
private String name; //类别名称
private int num; //销量
public Proct(String name, int num) {
this.name = name;
this.num = num;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
4.客户端接收数据后显示
客户端接受服务器数据并解析后,就可以正常显示图表数据了:
Ⅱ 有哪些好用的Python库
Python作为一门胶水语言,第三方库众多,下面我简单介绍几个好用的Python库:
tensorflow
这是谷歌非常着名的一个开源机器学习框架,在业界非常受欢迎,可以灵活、快速的构建大规模机器学习应用(如神经网络等),性能和可移植性都非常不错,支持GPU并行计算,如果你对机器学习比较感兴趣,也想深入了解一下的话,可以学习一下这个框架,非常不错:
pandas
如果你对数据分析比较感兴趣,那么pandas就是一个非常不错的选择,专门为数据分析而建,内置的函数和方法可以快速处理Excel,CSV等文件,而且提供了实时分析功能,代码量更少,使用起来也更方便,对于数据处理来说,是一个非常不错的分析工具:
matplotlib
这是Python的一个数据可视化库,可以快速制作我们常见的图表,如柱状图、饼状图、散点图等,当然,也不仅仅限于这些,还有很多,如果你想画出更多美丽的图表,可以考虑学习一下这个库,非常值得学习,当然,seaborn,pyecharts等这些可视化库也非常不错:
tushare
如果你对金融财经比较感兴趣,想快速获取股票等行情数据,也不想编写复杂的处理代码,那么tushare就是一个非常不错的选择,自动整合了国内大部分金融财经数据,完成了数据从采集、清洗和存储的全过程,只需简单的几行代码就可以实时快速获取到你所想要的数据,免费且开源:
PyQt
这是Python的一个GUI开发库,如果你想快速创建一个桌面GUI程序,想直接拖拽控件布局界面的话,那么PyQt就是一个非常不错的选择,基于Qt的QtDesigner设计工具,你可以直接拖拽Qt大量的控件快速构建出你自己的桌面应用,简单而又快捷:
Kivy
如果你想利用Python开发一个安卓应用,那么kivy就是一个非常不错的选择,这是Python的一个开源、跨平台的GUI库,只需要编写一套代码,即可运行在大部分桌面及移动平台上,包括winsows,linux,ios,android等,非常不错:
scrapy
这是Python的一个爬虫框架,在也就非常受欢迎,如果你想快速的定制自己的爬虫程序,又不想重复的造轮子的话,可以学习一下这个库,只需要添加少量的代码,就可启动属于自己的一个爬虫应用,非常方便:
django
这是一个流行的PythonWeb框架,如果你想快速构建一个自己的web应用,那么这个框架就非常值得学习,成熟稳重,基于MVC模式,使用起来非常方便,当然,也有轻量级的web框架,如flask,tornado等,也都非常不错:
pygame
如果你想快速开发一个小型游戏,又不想低级语言的束缚,可以考虑学习一下这个库,非常简单,只需要少量的代码便可构建一个游戏应用,当然,它也是一个非常不错的GUI库,对于桌面开发来说,也是一个不错的选择:
you-get
这是Python的一个视频、音频下载库,如果你想免费快速下载优派卜酷、B站、腾讯等网站的视频,安装这个库后,只尘竖穗需要简单的一行命令就可直接下载,非常方便,纤哗而且还可以在线观看,查看视频文件格式及清晰度等,当然,图片也可直接下载:
就介绍这10个不错的Python库吧,对于日常学习开发来说,非常不错,当然,还有许多其他好用的Python库,这个可以到网上搜索一下,非常多,也欢迎大家留言补充。
Ⅲ 值得推荐的数据可视化工具有哪些
推荐几款我比较常用的可视化工具
Excel
通常认为Excel不是可视化工具,不过也确实能作出一些很漂亮的图表,主要问题在于默认的图表设计都太丑了太丑了。如果你想做得好一点,可能要花的时间比较多。不支持一键拖拽生成图表,在细节的处理上需要花更多的时间。
实际上还有很多其他的像echart,D3.js,highcharts等等,工具的选择上是非常多的,我个人的建议是在精专一个的同时多了解一下其他的工具。“你手里拿着锤子,看什么都是钉子”,不要被你自己所掌握的工具所限制,我们的出发点始终是问题解决的。我们应当做的是“你眼里看着钉子,拿什么都是锤子”。(文/艾萌atanqing,一个略懂数据分析的心理咨询师)