JFreeChart与AJAX+JSON+ECharts三种处理方式生成热词总计可视化图表

本篇的思考:对HDFS获取的数据开始展览二种分化的可视化图表处理格局。第叁种JFreeChar可视化处理生成图片文件查看。第壹种AJAX+JSON+ECharts完结可视化图表,并显示于浏览器上。

       
对此,给出代码示例,通过网络爬虫技术,将上传到HDFS的天涯论坛网信息消息完毕热词总计功用,通过图形的柱状图来展现出来。

——>

目录:

① 、JFreeChart可视化处理(生费用地图片)

  【1】HDFS文件读取

  【2】JDFreeChart库应用

贰 、AJAX+JSON+EChart生成可视化图表(网页展现图表)

  【1】EChart基本形式

  【2】JSON数据格式

  【3】AJAX技术

  【4】热词总结示例

3、总结

——>

一 、JFreeChart可视化处理

【1】HDFS文件读取

保留时,大家多少应用了三种办法保留:

1) 纯文本格局:适合全体读取数据,并按即将内容读取出来处理。

2) MapFileFormat的方式:适合按key来查找value

 

此间能够使用FSDataInputStream来直接读入文本格局的多少。

代码展现:

 1 public class TestReadData {
 2 
 3     public static void main(String[] args) throws Exception {
 4         Configuration conf = new Configuration();
 5         FileSystem fs = null;
 6         Path path = new Path("hdfs://localhost:9000/output/part-00000");
 7         fs = path.getFileSystem(conf);
 8         FSDataInputStream is = fs.open(path);
 9         // 使用一个缓冲流或者内存流来整体读入数据
10         BufferedReader br = new BufferedReader(new InputStreamReader(is));
11         String line = null;
12         while ((line = br.readLine()) != null) {
13             String[] strs = line.split("\t");
14             System.out.println(strs[0] + " --> " + strs[1]);
15         }
16     }
17 }

 

下边大家想从这几个词里提取出出现频率最高的拾三个词。

此地就供给利用插入排序的法子来成功。

故此大家那里编写三个工具类,来支持大家做到排序作用。

并且,为了便利开始展览对象的保留和传递,建议编写贰个vo类来保存关键字和现身次数。

 

代码呈现:

 1 public class MyKeyValue {
 2 
 3     private String key;
 4     private Integer value;
 5 
 6     public MyKeyValue() {
 7     }
 8 
 9     public MyKeyValue(String key, Integer value) {
10         this.key = key;
11         this.value = value;
12     }
13 
14     public String getKey() {
15         return key;
16     }
17 
18     public void setKey(String key) {
19         this.key = key;
20     }
21 
22     public Integer getValue() {
23         return value;
24     }
25 
26     public void setValue(Integer value) {
27         this.value = value;
28     }
29 
30     public int compare(MyKeyValue other) {
31         if (this.value >= other.value) {
32             return 1;
33         } else {
34             return -1;
35         }
36     }
37 }

 

此刻急需修改TestReadData类,添加vo对象,以及清除有些热词:

 

 1 public class TestReadData {
 2 
 3     private static Set<String> allNoKeyword = new HashSet<>();
 4 
 5     static {
 6         allNoKeyword.add("新闻");
 7         allNoKeyword.add("新浪网");
 8         allNoKeyword.add("新浪");
 9         allNoKeyword.add("聚合");
10         allNoKeyword.add("中国");
11         allNoKeyword.add("视频");
12         allNoKeyword.add("图片");
13         allNoKeyword.add("图集");
14         allNoKeyword.add("最新");
15         allNoKeyword.add("阅读");
16     }
17 
18     public static void main(String[] args) throws Exception {
19         Configuration conf = new Configuration();
20         FileSystem fs = null;
21         Path path = new Path("hdfs://localhost:9000/output/part-00000");
22         fs = path.getFileSystem(conf);
23         FSDataInputStream is = fs.open(path);
24         // 使用一个缓冲流或者内存流来整体读入数据
25         BufferedReader br = new BufferedReader(new InputStreamReader(is));
26         String line = null;
27         // 建立工具类
28         ValueSortList list = new ValueSortList();
29         while ((line = br.readLine()) != null) {
30             String[] strs = line.split("\t");
31             // 建立vo对象
32             if (!allNoKeyword.contains(strs[0]) && strs[0].length() > 1) {
33                 MyKeyValue keyValue = new MyKeyValue(strs[0],
34                         Integer.parseInt(strs[1]));
35                 list.add(keyValue);
36             }
37         }
38 
39         System.out.println(list);
40     }
41 }

 

【2】JFreeChart库应用

 

JFreeChart是由Java提供的免费不开源的数码可视化的库。

 

率先将支撑包参加到品种中。

从此现在方可经过以下确定地点的步调,来依据数量,生成图表。

1) 创立数量集合

2) 向集合中添加多少

3) 建立图表对象(根据必要选取分化的图样)

4) 设置图表的参数

5) 将图纸输出

 

饼状图(这里还辅助环状和3D效果):

 1 public class PieDemo {
 2        
 3     public static void main(String[] args) throws Exception {
 4         // 数据集
 5         DefaultPieDataset dataset = new DefaultPieDataset();
 6 
 7         // 添加数据
 8         ValueSortList list = TestReadData.getValues();
 9 
10         for (MyKeyValue keyValue : list.getList()) {
11             dataset.setValue(keyValue.getKey(), keyValue.getValue());
12         }
13 
14         // 创建对象
15         JFreeChart chart = ChartFactory.createPieChart("新浪新闻热词分析", dataset,
16                 true, true, false);
17 
18         // 设置属性
19 
20         // 输出
21         ChartUtilities.saveChartAsPNG(new File("E:/pie.png"), chart, 500, 500);
22 
23     }
24 
25 }

柱状图和线型图:(还帮助线、3D柱、3D线、区域)

 1 public class BarDemo {
 2 
 3     public static void main(String[] args) throws Exception {
 4         DefaultCategoryDataset dataset = new DefaultCategoryDataset();
 5 
 6         ValueSortList list = TestReadData.getValues();
 7 
 8         for (MyKeyValue keyValue : list.getList()) {
 9             dataset.addValue(keyValue.getValue(), keyValue.getKey(), "");
10         }
11 
12         JFreeChart chart = ChartFactory.createBarChart("热词分析", "词", "次数",
13                 dataset, PlotOrientation.VERTICAL, true, true, false);
14 
15         ChartUtilities.saveChartAsPNG(new File("E:/bar.png"), chart, 1000, 500);
16 
17     }
18 }

 

 

 

贰 、AJAX+JSON+ECharts生成可视化图表

【1】ECharts基本选取

 

ECharts最早是有局地开源的工程师来开发的免费应用的图纸工具,在
1 和 2版本时都是放在github上。之后ECharts被百度投资收购,参加了百度的开源产品中。

假使想利用ECharts那种的开源工具,必须先去其官网下载开发包。

 

下载时,提议将完整版和开发版都下载下来,开发版用于支付时开始展览调节,完整版用于上线提升质量。

 

上面就须求掌握哪些做到一个简易的ECharts图表(此也为官网给出的代码示例)。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="echarts.js"></script>
 7     <script type="text/javascript">
 8         function initChart() {
 9             // 初始化要显示的图标div
10             var myChart = echarts.init(document.getElementById('my_chart'));
11             var option = {
12                 title: {
13                     text: 'ECharts 入门示例'
14                 },
15                 tooltip: {
16                     trigger:"axis",
17                     label:"销量"
18                 },
19                 legend: {
20                     data:['销量','价格']
21                 },
22                 xAxis: {
23                     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
24                 },
25                 yAxis: {},
26                 series: [{
27                     name: '销量',
28                     type: 'bar',
29                     data: [5, 20, 36, 10, 10, 20]
30                 },{
31                     name: '价格',
32                     type: 'line',
33                     data: [30, 40, 32, 15, 80, 30]
34                 }]
35             };
36 
37             myChart.setOption(option);
38         }
39 
40     </script>
41 </head>
42 <body onload="initChart();">
43     
44     <div id="my_chart" style="width:600px;height:400px;"></div>
45 
46 </body>
47 </html>

 

【2】JSON数据格式

JSON:JavaScript Object Notation,是ECMAScript的行业内部语法

以此语法是当今具有AJAX可能说数据传输的最常用的语法格式。

利用该语法的缘由是语法格式不难,没有首要字来捣乱大概占有内部存款和储蓄器。

浅析时各个语言都有很简单的解析方法。

专门是JavaScript,能够直接通过自带的eval()方法来成功字符串转换对象或数组的操作。

 

JSON语法很简短:

1) 对象:{}

  a) 属性: 属性名:属性值,八个天性之间逗号分隔

  b) 方法: 方法名:function(){}

2) 数组:[]

  a) 种种成分运用逗号分隔。

 

【3】AJAX技术

AJAX:Asynchronous JavaScript And Xml,异步的JavaScript和XML,不是新技巧,是基于JS和XML技术的应用,不过以往XML一般都被JSON替代了,所以实际上AJAX已经济体改为了纯JS的技术了。

通过AJAX技术,能够在页面不刷新的意况下,让前者交换后台来获取数据,数据经过JSON格式来回到进行处理。

诸如此类前后台分离就更干净了,后台只须求专注于后台接口的支付即可,通过接口再次来到JSON数据。

前台则是收纳了归来的数码后,依照数量形成各类页面效果的显得。

 

AJAX技术一度很干练了,通过一定的5个步骤就足以调换后台接受结果。

壹 、 建立基本配置对象XMLHttpRequest

贰 、 建立与后台的总是

③ 、 设置再次回到时的回调函数

当后台执行完毕果再次回到数据时,前台必须有个方法能够接收这些数目,并展开始拍录卖,那些艺术便是回调函数(Callback)

 

【4】热词总括划生育成可视化图表

基于ECharts,大家来把热词计算功用,通过那几个ECharts图表的柱状图来展现出来。

 1         var xmlHttp ;
 2         
 3         function createXMLHttp() {
 4             if (window.XMLHttpRequest != null) {
 5                 xmlHttp = new XMLHttpRequest();
 6             } else {
 7                 xmlHttp = new ActiveXObject("Microsoft.xmlhttp");
 8             }
 9         }
10     
11         function initChart() {
12             // 初始化要显示的图标div
13             var myChart = echarts.init(document.getElementById('my_chart'));
14             
15             // 这里就需要通过AJAX技术,来调用后台数据操作,接收返回的JSON格式数据
16             // 1
17             createXMLHttp();
18             // 2
19             xmlHttp.open("get","<%=basePath%>ajax.do");
20             // 3
21             xmlHttp.onreadystatechange = chartCallback;
22             // 4
23             xmlHttp.send();
24         }
25         
26         function chartCallback() {
27             
28         }

 

 之后,要求在后台的ajax.do中进行HDFS的操作,将索要的多少得到,并透过JSON的格式来回到页面。

    @RequestMapping(value = "/ajax.do")
    public void ajax(HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        // 读取HDFS中的文本数据
        ValueSortList list = HDFSUtils.getValues();

        StringBuilder builder = new StringBuilder(
                "{ title: {text: '新浪新闻热词分析'},tooltip: {trigger:'axis'},");
        builder.append("legend: {data:['词频']},xAxis: {data: [");
        StringBuilder tempSeries = new StringBuilder();
        tempSeries.append("series: [{name:'词频',type:'bar',data:[");
        for (MyKeyValue kv : list.getList()) {
            builder.append("'");
            builder.append(kv.getKey());
            builder.append("',");
            tempSeries.append(kv.getValue());
            tempSeries.append(",");
        }
        // 需要把最后一段截取掉
        String resultStr = builder.substring(0, builder.length() - 1)
                + "]}, yAxis: {},";
        resultStr += tempSeries.substring(0, tempSeries.length() - 1) + "]}]}";

        // 结果返回需要通过PrintWriter来输出
        // 需要先处理返回乱码
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        PrintWriter writer = response.getWriter();
        writer.print(resultStr);
        writer.close();
    }

 

日后编写页面回调函数就能够来得图表了。

1         function chartCallback() {
2             // 判断结果是否真正返回
3             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
4                 var resultStr = xmlHttp.responseText;
5                 // 转换为对象
6                 var option = eval("("+resultStr+")");
7                 myChart.setOption(option);
8             }
9         }

 

可是大家会意识,拼写JSON字符串太难为了,因而实际支付中会有众多**java用的json数据处理的库,能够扶持大家大致的拼写出json**字符串

例如:org.json

 1     @RequestMapping(value = "/ajax.do")
 2     public void ajax(HttpServletRequest request, HttpServletResponse response)
 3             throws Exception {
 4         // 读取HDFS中的文本数据
 5         ValueSortList list = HDFSUtils.getValues();
 6 
 7         JSONObject obj = new JSONObject();
 8         
 9 
10         JSONObject titleObj = new JSONObject();
11         titleObj.put("text", "新浪新闻热词分析");
12         obj.put("title", titleObj);
13 
14         JSONObject tooltipsObj = new JSONObject();
15         tooltipsObj.put("trigger", "axis");
16         obj.put("tooltip", tooltipsObj);
17 
18         JSONObject legendObj = new JSONObject();
19         legendObj.put("data", "词频");
20         obj.put("legend", legendObj);
21 
22         obj.put("yAxis", new JSONObject());
23 
24         JSONObject xObj = new JSONObject();
25         JSONArray seArr = new JSONArray();
26         JSONObject seObj = new JSONObject();
27         seObj.put("name", "词频");
28         seObj.put("type", "bar");
29         JSONArray xDataArr = new JSONArray();
30         JSONArray seDataArr = new JSONArray();
31 
32         for (MyKeyValue kv : list.getList()) {
33             xDataArr.put(kv.getKey());
34             seDataArr.put(kv.getValue());
35         }
36 
37         xObj.put("data", xDataArr);
38         seObj.put("data", seDataArr);
39         seArr.put(seObj);
40 
41         obj.put("xAxis", xObj);
42         obj.put("series", seArr);
43 
44         // 结果返回需要通过PrintWriter来输出
45         // 需要先处理返回乱码
46         response.setCharacterEncoding("UTF-8");
47         response.setContentType("text/html");
48         PrintWriter writer = response.getWriter();
49         writer.print(obj.toString());
50         writer.close();
51     }

 

对于那种热词分析,前台最佳的呈现格局应该是文字云,因此大家那边一贯动用文字云的插件来形成。

首先也要导入js文件。

 1 <script type="text/javascript" src="echarts/echarts.js"></script>
 2 <script type="text/javascript" src="echarts/echarts-wordcloud.js"></script>
 3 <script type="text/javascript">
 4         var xmlHttp ;
 5         
 6         var myChart ;
 7         
 8         var option ;
 9         
10         function createXMLHttp() {
11             if (window.XMLHttpRequest != null) {
12                 xmlHttp = new XMLHttpRequest();
13             } else {
14                 xmlHttp = new ActiveXObject("Microsoft.xmlhttp");
15             }
16         }
17     
18         function initChart() {
19             // 初始化要显示的图标div
20             myChart = echarts.init(document.getElementById('my_chart'));
21             
22             option = {
23                     tooltip: {},
24                     series: [{
25                         type: 'wordCloud',
26                         gridSize: 2,
27                         sizeRange: [12, 50],
28                         rotationRange: [-90, 90],
29                         shape: 'pentagon',
30                         width: 600,
31                         height: 400,
32                         drawOutOfBound: true,
33                         textStyle: {
34                             normal: {
35                                 color: function () {
36                                     return 'rgb(' + [
37                                         Math.round(Math.random() * 160),
38                                         Math.round(Math.random() * 160),
39                                         Math.round(Math.random() * 160)
40                                     ].join(',') + ')';
41                                 }
42                             },
43                             emphasis: {
44                                 shadowBlur: 10,
45                                 shadowColor: '#333'
46                             }
47                         }
48                     }]
49             };
50             
51             // 这里就需要通过AJAX技术,来调用后台数据操作,接收返回的JSON格式数据
52             // 1
53             createXMLHttp();
54             // 2
55             xmlHttp.open("get","<%=basePath%>ajax_cloud.do");
56             // 3
57             xmlHttp.onreadystatechange = chartCallback;
58             // 4
59             xmlHttp.send();
60         }
61 这里为了简化后台拼写JSON,将固定的内容提前设置到option对象中。

 

事后在后台实现多少的拼写。

 1     @RequestMapping(value="/ajax_cloud.do")
 2     public void ajaxCloud(HttpServletRequest request,
 3             HttpServletResponse response) throws Exception {
 4         ValueSortList list = HDFSUtils.getValues();
 5 
 6         JSONArray array = new JSONArray();
 7         for (MyKeyValue kv : list.getList()) {
 8             JSONObject obj = new JSONObject();
 9             obj.put("name", kv.getKey());
10             obj.put("value", kv.getValue());
11             array.put(obj);
12         }
13         
14         response.setCharacterEncoding("UTF-8");
15         response.setContentType("text/html");
16         PrintWriter writer = response.getWriter();
17         writer.print(array.toString());
18         writer.close();
19     }

 

最终在回调函数中开始展览设置处理。

1         function chartCallback() {
2             // 判断结果是否真正返回
3             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
4                 var resultStr = xmlHttp.responseText;
5                 // 转换为对象
6                 option.series[0].data = eval("("+resultStr+")");
7                 myChart.setOption(option);
8             }
9         }

 

 

结果表现(柱状图):

图片 1

 总结:

  以前边解说的网络爬虫、HDFS数据读取、MKoleos数据解析、Lucene垂直搜索引擎,到未来的可视化图表展现,二个简约的大数目处理框架也渐浮水面。

     ① 、数据获取数据记录

     二 、提取清洁数据标注

     叁 、整合集聚数据表明

     ④ 、建模数据解析

     伍 、合理表达可视化

   即使并比不上真正的大数量处理的数据量之大、之复杂,可视化的水准也仅限于热词总计,可是既然授之以渔,而且也终于对此有了1个着力的问询了。

  关于本篇给出的两种可视化处理格局,其实还有不少艺术。笔者只演说了EFreeChart和ECharts二种办法,一种变化本地图片文件类型,一种组成AJAX+JSON能够在网页上海展览中心现可视化图表。然而见解很浅薄,仅借本文能够让未知的读者完结一个简练的图片彰显形式,给内功深厚的王牌淡然一笑,我也就欢欣鼓舞了。