那些年我们一起学过的直方图

某天下午小编正在安安静静地撸代码,突然听说在我们的 gallery 上,有用户提出,ECharts 不支持直方图,什么?这怎么能忍?于是小编将珍藏已久的机械键盘拿出来,摆好姿势,通宵达旦地为用户大大们加好了直方图,并于上周四悄悄上线了,对,我们就是这么低调。然而,很多大大们表示,直方图还是柱状图?傻傻分不清。小编深感这年头光有图怕是不行了,必须得有个教程,要做到图文并茂。下面小编就从直方图是什么,为什么要用直方图,以及如何使用 ECharts 制作直方图三个方面,为各位大大们上点干货。

直方图是什么

直方图主要用来反映一组样本数据的分布情况。从图的形式来看,它属于柱状图的一种,但它和柱状图相比还是有很多不同之处的。首先,直方图的任意两个 bar 之间不允许有间隙,这是因为原始样本值被分割成一系列连续的、相互邻接的小区间,每一个小区间都是左闭右开的,除了最后一个,如[x0, x1), [x1,x2), [x2,x3],在直方图中小区间又被称为“bin”。其中bin的高度是由落入该区间中样本值的个数决定的;其次,在 ECharts 中绘制双数值轴(这里的双数值轴指的是 x 轴和 y 轴都是数值类型的)柱状图,用户需要传入二维的数组,如array1 = [[1, 2], [3, 4]],而绘制直方图,用户只需要传入一维的数组,如array2 = [1, 2, 3, 4],然后由ECharts 统计扩展将一维的样本值分割成一个个具体的bin,并计算输出每一个bin的绘制信息,然后选用 ECharts 柱状图绘制具体的直方图。

为什么要用直方图

前面已经提到了,直方图主要用来反映样本数据的分布,如下图,这是使用著名的虹膜花数据集中的花瓣长度这一维度所作的直方图。从图中可以直观地看出该维度样本数据不符合正态分布,有多个峰值,具有明显的差异。这说明不同种类虹膜花的花瓣长度,受多个因素的影响,同时也表明在进一步的数据分析中,所有基于正态分布假设的分析,都不适合该维度数据。

petal-width

除此之外,直方图还可以用来进行数据审查。所谓的数据审查,是指在数据预处理之前,通过直方图直观地审视样本数据中的每个维度,检查是否有异常值的同时,了解值的分布。如图,这是记录 31 颗黑樱桃树周长的样本数据,从图中可以明显地看出有三个异常值,因为树的周长肯定大于 0 ,不会出现小于 0 的负数,而[-5, 0)这个区间内有三个样本值,这就需要通过数据清洗将异常值过滤掉。

girth-tree

如何使用 ECharts制作直方图

ECharts 是一个强大的可视化图表库,并不是一个统计分析的工具,所以我们将处理原始数据并分割成一个个具体的bin这一部分放在了 ECharts 的统计扩展中实现。这就需要我们在引入 echarts.js 的同时,引入统计扩展对应的 ecStat.js,如:

<script src="echarts.js"></script>
<script src="ecStat.js"></script>

<script>

var height = [70, 65, 63, 72, 81, 83, 66, 75, 80, 75, 79, 76, 76, 69, 75, 74, 85, 86, 71, 64, 78, 80, 74, 72, 77, 81, 82, 80, 80, 80, 87];

var bins = ecStat.histogram(height);

</script>

然后使用统计扩展处理过后的数据,配置 ECharts 柱状图中的 option,如:

var option = {
    color: ['rgb(25, 183, 207)'],
    grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'value',
        //这个一定要设,不然barWidth和bins对应不上
        scale: true,
    }],
    yAxis: [{
        type: 'value',
    }],
    series: [{
        type: 'bar',
        barWidth: '99.3%',
        label: {
            normal: {
                show: true,
                position: 'insideTop',
                formatter: function (params) {
                    return params.value[1];
                }
            }
        },
        data: bins.data
    }]
};

这样就得到了如下的直方图:

height-tree

这里不得不说的是,由于历史遗留的问题,ECharts 中的柱状图并不能完美地支持直方图的绘制,所以不得不使用一些小的 trick,如设置 xAxisscaletrue,调整 barWidth 的值等。不过,大家不用担心,作为一个良心以及正义感爆棚的团队,我们即将发布一款新的自定义图表类型。经小编亲测,该图表类型可以画出狂拽酷炫屌炸天的直方图,敬请期待哦。

更多相关信息

在 ECharts GL 中绘制三维地图

ECharts 前段时间发布了超亮眼的 GL,相对于之前已经圈粉无数的 ECharst-X 而言,ECharst GL 更是帅到爆,无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢?答案是肯定的,用户除了能够根据数据画出诸如三维地图等三维的可视化图之外,只需要在项目中加入几个简单的配置项,就能配制出想要的风格的高质量画面效果。

直方图 教程 扩展

ECharts v3.6 发布:自定义系列、极坐标柱状图

在 ECharts 新发布的 3.6 版本中,新增了自定义系列,能让用户定制渲染逻辑,从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。

直方图 教程 扩展

ECharts 统计扩展教程

你是否想了解一组样本数据的分布情况?你是否想根据用户的数值属性将用户分成不同的群体?你是否想预测两个变量的变化趋势?——什么?不需要?不要再违心了,小编已经听到来自你们内心深处的呐喊,今天就为大家推荐一款神器——ECharts 统计扩展,这是一个用来进行数据分析的扩展工具,包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合,可以使大家方便地实现可视分析,也就是将数据分析的结果,通过可视化直观地呈现出来。

直方图 教程 扩展