统计图表

电玩女神 2022-03-15 12:24 333阅读 0赞

# 统计图表 #

## 一. 为什么要使用统计图表 ##

1，数据可视化，用于分析  
2，用于方便领导进行决策统计

## 二. 需要支持的东西 ##

必须得有数据【不能少】，数据需要分类

## 三. 如何在网页展示统计图表 ##

使用js图表插件就能很方便的制作出统计图表，常用的js图表插件有

1.  Highcharts-6.0.7 [http://www.hcharts.cn/][http_www.hcharts.cn]  
    2.百度的EChart [http://echarts.baidu.com/][http_echarts.baidu.com]  
    3.FusionCharts [https://www.fusioncharts.com/charts/][https_www.fusioncharts.com_charts]

以HighCharts为例，我们需要在项目中引用highCharts的资源文件，  
需要引入最基本的文件：modules目录和核心文件highcharts.js  
![在这里插入图片描述][20190302170022588.png]  
在项目中新建一个highcharts文件夹，将上面的moudels目录和highcharts.js拷贝到highcharts文件夹中  
![在这里插入图片描述][20190302170029697.png]

## 四. 常用图表 ##

1.  柱状图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]  
    2.折线图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 1]  
    3.饼图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 2]

## 五.图表数据封装 ##

是把higcharts动态数据封装到一个javaBean类中，即封装数据列的数据模型

public class ChartModel {
        
      //数据列名称
    	private String   name;
    	//数据列的具体数据
    	private List<Integer> data;
    	public String getName() {
        
    		return name;
    	}
    	public void setName(String name) {
        
    		this.name = name;
    	}
    	public List<Integer> getData() {
        
    		return data;
    	}
    	public void setData(List<Integer> data) {
        
    		this.data = data;
    	}
    	public ChartModel(String name, List<Integer> data) {
        
    		super();
    		this.name = name;
    		this.data = data;
    	}
    	public ChartModel() {
        
    		super();
    		// TODO Auto-generated constructor stub
    	}
    }

## 六．整合图表到项目中 ##

1)修改main/index.jsp上的超链接

2）在项目的WebRoot根路径下建立highcharts目录，存入highcharts的资源文件

![在这里插入图片描述][20190302170158445.png]  
3）分析柱状图或折线图需要的数据

A.x轴分类： 所有业务员名字

B.数据列  
有效优质客户数：查询所有业务员各自的有效优质客户数，是7个数据构成的集合  
有效良好客户数：查询所有业务员各自的有效良好客户数，是7个数据构成的集合

[http_www.hcharts.cn]: http://www.hcharts.cn/
[http_echarts.baidu.com]: http://echarts.baidu.com/
[https_www.fusioncharts.com_charts]: https://www.fusioncharts.com/charts/
[20190302170022588.png]: /images/20220315/47f172a0420a4b0e93d003af920af10e.png
[20190302170029697.png]: /images/20220315/5d7d1c1c53b7414794e93839b5c0587b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]: /images/20220315/71ce6cafb86a422aa61afbef3735a549.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 1]: /images/20220315/ffe589f409cf46ca8ec34465abed8829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 2]: /images/20220315/18b5f183fddb482490986b6f2fc26d73.png
[20190302170158445.png]: /images/20220315/ffe7b41b448c4759ad2e5eda4550d4cd.png