程序员开发实例大全宝库

网站首页 > 编程文章 正文

统计图形(I) - 网络统计学（统计图算法）

zazugpt 2024-08-13 13:08:51 编程文章 27 ℃ 0 评论

统计图形具有直观、形象、生动、具体等特点，可以使复杂的统计数据简单化、通俗化、形象化，使人一目了然，便于理解和比较。统计图在统计资料整理与分析中占有重要地位，并得到广泛应用。

一、统计图形、类型和结构

1、统计图形

统计图是根据统计数字，用几何图形、事物形象和地图等绘制的各种图形。它具有直观、形象、生动、具体等特点。统计图可以使复杂的统计数字简单化、通俗化、形象化，使人一目了然，便于理解和比较。因此，统计图在统计资料整理与分析中占有重要地位，并得到广泛应用。

统计图形是利用点、线、面、体等绘制成几何图形，以表示各种数量间的关系及其变动情况的工具。常用的统计图有条形统计图、扇形统计图、折线统计图、散点图等。在统计学中把利用统计图形表现统计资料的方法叫做统计图示法。

一般采用直角坐标系，横坐标用来表示事物的组别或自变量x，纵坐标常用来表示事物出现的次数或因变量y；或采用角度坐标(如圆形图)、地理坐标(如地形图)。

按图形的数字性质分类，有实数图、累积数图、百分数图、对数图、指数图等；其结构包括图名、图目(图中的标题)、图尺(坐标单位)、各种图线(基线、轮廓线、指导线等)、图注(图例说明、资料来源等)等。

2、eCharts

eCharts（百度官网：https://echarts.apache.org/zh/index.html），商业级数据图表，一个纯Javascript的开源图表库，由百度商业前端数据可视化团队负责开发维护。可以流畅的运行在PC和移动设备上。

底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。由eCharts生成的图形为展示统计数据提供了完美解决方案。

3、JSON

JSON是一种轻量级的数据交换格式,采用完全独立于语言的格式化文本。JSON格式文本易于人阅读和编写，同时也易于机器解析和生成。Json的规格非常简单，只用一个页面几百个字就能说清楚（JSON数据结构 - 网络统计学编程），这些特性使JSON成为理想的数据交换语言。JSON被作为用户和eCharts间数据交换语言，用户需求通过JSON命令描述图形特征和数据，eCharts解析JSON指令后输出图形到浏览器。

二、eCharts网页绘图

1、网页中使用eCharts绘图

在网页中设置图形容器：

<div id="oChart" style="height:300px; width:100%;"></div>

在JavaScript代码中：

var myChart = echarts.init(document.getElementById("oChart"));
// 基于准备好的dom，初始化echarts实例
// 指定图表的数据项

var option = {} // 指定图表的配置项
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表

#Code eChartS01：网页中使用eCharts案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<body>
<p>eCharts官网：https://echarts.apache.org/zh/index.html</p>
<div id="main" style="width: 600px;height:400px;"></div>
<p/>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    title: {text: 'ECharts 入门示例'},
    tooltip: {},
    legend: {data:['销量']},
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body></html>

保存Code eChartS01代码到本地，运行结果如下：

2、eCharts统计图形模板

eCharts分为不同版本（详解参见eCharts官网）。不同版本eCharts图形风格区别较大。

在Code eChartS01代码中，将echarts的Javascript链接库文件

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

更换为

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>

保存Code eChartS01代码到本地，运行结果如下：

3、散点图（数据和配置）

散点图(scatter diagram)又称散点分布图，是以一个变量为横坐标，另一变量为纵坐标，利用散点（坐标点）的分布形态反映变量统计关系的一种图形。特点是能直观表现出影响因素和预测对象之间的总体关系趋势。优点是能通过直观醒目的图形方式反映变量间关系的变化形态，以便决定用何种数学表达方式来模拟变量之间的关系。散点图不仅可传递变量间关系类型的信息，也能反映变量间关系的明确程度。

【数据】

var oFemaleData = [
    [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
    [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
    [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2],
    [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], [147.2, 49.8],
    [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8]
];
var oMaleData = [
    [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6],
    [187.2, 78.8], [181.5, 74.8], [184.0, 86.4], [184.5, 78.4],
    [175.0, 62.0], [184.0, 81.6], [180.0, 76.6], [177.8, 83.6],
    [192.0, 90.0], [176.0, 74.6], [174.0, 71.0], [184.0, 79.6],
    [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9]
];

【配置option】

var option = {
    title : {
        text: '男性女性身高体重分布'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
            if (params.value.length > 1) {
                return params.seriesName + ' :<br/>'
                   + params.value[0] + 'cm ' 
                   + params.value[1] + 'kg ';
            }
            else {
                return params.seriesName + ' :<br/>'
                   + params.name + ' : '
                   + params.value + 'kg ';
            }
        },  
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data:['女性','男性']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            saveAsImage : {show: true}
        }
     },
    xAxis : [
        {
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value} cm'
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value} kg'
            }
        }
    ],
    series : [
        {
            name:'女性',
            type:'scatter',
            data: oFemaleData,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'男性',
            type:'scatter',
            data: oMaleData,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
    }

将【数据】和【配置】项加入网页文档，

【文档】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<body>
<p>eCharts官网：https://echarts.apache.org/zh/index.html</p>
<div id="main" style="width: 600px;height:400px;"></div>
<p/>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的数据项
var oFemaleData = [
    [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], 
    [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], 
    [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2], 
    [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], [147.2, 49.8], 
    [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8]
    ];
var oMaleData = [
    [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], 
    [187.2, 78.8], [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], 
    [175.0, 62.0], [184.0, 81.6], [180.0, 76.6], [177.8, 83.6], 
    [192.0, 90.0], [176.0, 74.6], [174.0, 71.0], [184.0, 79.6], 
    [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9]
    ];

// 指定图表的配置项
var option = {
    title : {
        text: '男性女性身高体重分布'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
            if (params.value.length > 1) {
                return params.seriesName + ' :<br/>'
                   + params.value[0] + 'cm ' 
                   + params.value[1] + 'kg ';
            }
            else {
                return params.seriesName + ' :<br/>'
                   + params.name + ' : '
                   + params.value + 'kg ';
            }
        },  
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data:['女性','男性']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            saveAsImage : {show: true}
        }
     },
    xAxis : [
        {
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value} cm'
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value} kg'
            }
        }
    ],
    series : [
        {
            name:'女性',
            type:'scatter',
            data: oFemaleData,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'男性',
            type:'scatter',
            data: oMaleData,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
    }
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body></html>

【图形】

利用eCharts绘图主要是设置【数据】和【配置】两项数据，在网页文档中，通常将【数据】代码放在【配置】代码前面。

下一篇：统计图形（II） - 网络统计学

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表