精华内容
下载资源
问答
  • 如何筛选数据做图表
    千次阅读
    2022-02-25 22:28:02

    我的需求:手动配置X轴、Y轴、图表标题等参数自动通过Pyecharts模块生成可视化的html数据图表,并将浏览器图表展示到UI界面上。

    【阅读全文】

    file

    制作出图表后的效果展示如下:

    file

    另外,生成后的图表结果会使用 html 的形式保存下来。

    file

    导入 UI 界面相关的 PyQt5 第三方模块库。

    from PyQt5.QtCore import *
    
    from PyQt5.QtWidgets import *
    
    from PyQt5.QtGui import *

    若是使用PyQt5的版本是5.10.1以上,则需要单独安装一下PyQtWebEngine,说是QtWebEngineWidgets模块被新版本移除了。执行一下下面安装单独安装一下PyQtWebEngine就OK了。

    pip install PyQtWebEngine

    导入 Web 浏览器引擎的支持。

    from PyQt5.QtWebEngineWidgets import QWebEngineView

    应用其他的相关模块导入。

    import sys  # 应用操作库
    
    import os
    
    from datetime import datetime
    
    from pyecharts.charts import *  # 图表设置展示库
    
    from pyecharts import options  # 图标参数配置库

    主要的代码块实现过程如下:

    class DataVisual(QWidget):
        def __init__(self):
            super(DataVisual, self).__init__()
            self.cwd = os.getcwd()  # 获取当前路径
            self.init_ui()
    
        def init_ui(self):
            self.setWindowTitle('数据图表生成器')
            self.setWindowIcon(QIcon('数据.ico'))
    
            self.brower = QWebEngineView()
            self.brower.setMinimumWidth(800)
            self.brower.setMaximumWidth(1400)
            self.brower.setUrl(QUrl(''))
    
            form = QFormLayout()
    
            '''折线图/柱状图控件开始'''
            self.selected_label = QLabel()
            self.selected_label.setText('设置图表类型:')
            self.selected_cobox = QComboBox()
            self.selected_cobox.addItems(['Bar(柱状图/条形图)', 'Line(折线/面积图)', 'Pie(饼图)'])
            self.selected_cobox.currentIndexChanged.connect(self.selected_cobox_change)
    
            self.title_label = QLabel()
            self.title_label.setText('设置标题:')
            self.title_text = QLineEdit()
            self.title_text.setPlaceholderText('请输入图表标题(最大长度10)')
            self.title_text.setMaxLength(10)
    
            self.subtitle_label = QLabel()
            self.subtitle_label.setText('设置副标题:')
            self.subtitle_text = QLineEdit()
            self.subtitle_text.setPlaceholderText('请输入图表副标题(最大长度20)')
            self.title_text.setMaxLength(20)
    
            self.data_label_x = QLabel()
            self.data_label_x.setText('设置X轴数据:')
            self.data_text_x = QLineEdit()
            self.data_text_x.setPlaceholderText("湖北, 四川, 重庆, 河北, 云南")
            self.data_text_x.setMaxLength(1000)
    
            self.data_label_y1_name = QLabel()
            self.data_label_y1_name.setText('设置Y1轴标签:')
            self.data_text_y1_name = QLineEdit()
            self.data_text_y1_name.setPlaceholderText("请输入Y1轴标签")
    
            self.data_label_y1 = QLabel()
            self.data_label_y1.setText('设置Y1轴数据:')
            self.data_text_y1 = QLineEdit()
            self.data_text_y1.setPlaceholderText("34500, 3000, 3218, 2890, 50023")
            self.data_text_y1.setMaxLength(1000)
    
            self.data_label_y2_name = QLabel()
            self.data_label_y2_name.setText('设置Y2轴标签:')
            self.data_text_y2_name = QLineEdit()
            self.data_text_y2_name.setPlaceholderText("请输入Y2轴标签")
    
            self.data_label_y2 = QLabel()
            self.data_label_y2.setText('设置Y2轴数据:')
            self.data_text_y2 = QLineEdit()
            self.data_text_y2.setPlaceholderText("1200, 100, 300, 130, 1004")
            self.data_text_y2.setMaxLength(1000)
            '''折线图/柱状图控件结束'''
    
            '''饼图控件开始'''
            self.pie_table_label = QLabel()
            self.pie_table_label.setText('设置标题:')
            self.pie_table_label.setVisible(False)
            self.pie_table_text = QLineEdit()
            self.pie_table_text.setPlaceholderText('请输入标题')
            self.pie_table_text.setVisible(False)
    
            self.pie_data_label = QLabel()
            self.pie_data_label.setText('设置饼图数据:')
            self.pie_data_label.setVisible(False)
            self.pie_data_text = QLineEdit()
            self.pie_data_text.setPlaceholderText("华为:35,三星:59")
            self.pie_data_text.setVisible(False)
    
            self.pie_radius = QLabel()
            self.pie_radius.setText('设置数据显示比例:')
            self.pie_radius.setVisible(False)
            self.pie_radius_text = QLineEdit()
            self.pie_radius_text.setPlaceholderText('65%')
            self.pie_radius_text.setVisible(False)
    
            self.pie_radius_cle = QLabel()
            self.pie_radius_cle.setText('设置圆环空心比例:')
            self.pie_radius_cle.setVisible(False)
            self.pie_radius_text_cle = QLineEdit()
            self.pie_radius_text_cle.setPlaceholderText('60%')
            self.pie_radius_text_cle.setVisible(False)
    
            '''饼图控件结束'''
    
            '''公共控件开始'''
            self.save_dir_text = QLineEdit()
            self.save_dir_text.setPlaceholderText('请选择图表保存地址')
            self.save_dir_text.setReadOnly(True)
            self.save_dir_btn = QPushButton()
            self.save_dir_btn.setText('存储路径')
            self.save_dir_btn.clicked.connect(self.save_dir_btn_click)
    
            self.version = QLabel()
            self.version.setText('<font color="green">公众号:[Python 集中营]</font>')
            self.generate_btn = QPushButton()
            self.generate_btn.setText('生成图表')
            self.generate_btn.clicked.connect(self.generate_btn_click)
    
            '''公共控件结束'''
    
            '''折线图/柱状图布局开始'''
            form.addRow(self.selected_label, self.selected_cobox)
            form.addRow(self.title_label, self.title_text)
            form.addRow(self.subtitle_label, self.subtitle_text)
            form.addRow(self.data_label_x, self.data_text_x)
            form.addRow(self.data_label_y1_name,self.data_text_y1_name)
            form.addRow(self.data_label_y1, self.data_text_y1)
            form.addRow(self.data_label_y2_name,self.data_text_y2_name)
            form.addRow(self.data_label_y2, self.data_text_y2)
            '''折线图/柱状图布局结束'''
    
            '''柱状图'''
            form.addRow(self.pie_table_label, self.pie_table_text)
            form.addRow(self.pie_radius, self.pie_radius_text)
            form.addRow(self.pie_radius_cle, self.pie_radius_text_cle)
            form.addRow(self.pie_data_label, self.pie_data_text)
            '''柱状图'''
    
            '''公共布局'''
            form.addRow(self.save_dir_text, self.save_dir_btn)
            form.addRow(self.version, self.generate_btn)
            '''公共布局'''
    
            hbox = QHBoxLayout()
            hbox.addWidget(self.brower)
            hbox.addSpacing(10)
            hbox.addLayout(form)
            self.setLayout(hbox)
    
        def save_dir_btn_click(self):
            directory = QFileDialog.getExistingDirectory(self, "选取文件夹", self.cwd)
            self.save_dir_text.setText(directory)
    
        def selected_cobox_change(self):
            selected = self.selected_cobox.currentText().strip()
            print(selected)
            if selected == 'Line(折线/面积图)' \
                    or selected == 'Bar(柱状图/条形图)':
    
                '''显示控件'''
                self.title_label.setVisible(True)
                self.title_text.setVisible(True)
    
                self.subtitle_label.setVisible(True)
                self.subtitle_text.setVisible(True)
    
                self.data_label_x.setVisible(True)
                self.data_text_x.setVisible(True)
    
                self.data_label_y1.setVisible(True)
                self.data_text_y1.setVisible(True)
    
                self.data_label_y2.setVisible(True)
                self.data_text_y2.setVisible(True)
    
                self.data_label_y1_name.setVisible(True)
                self.data_text_y1_name.setVisible(True)
    
                self.data_label_y2_name.setVisible(True)
                self.data_text_y2_name.setVisible(True)
    
                '''隐藏控件'''
                self.pie_table_label.setVisible(False)
                self.pie_table_text.setVisible(False)
    
                self.pie_data_label.setVisible(False)
                self.pie_data_text.setVisible(False)
    
                self.pie_radius.setVisible(False)
                self.pie_radius_text.setVisible(False)
    
                self.pie_radius_cle.setVisible(False)
                self.pie_radius_text_cle.setVisible(False)
            elif selected == 'Pie(饼图)':
    
                '''隐藏控件'''
                self.title_label.setVisible(False)
                self.title_text.setVisible(False)
    
                self.subtitle_label.setVisible(False)
                self.subtitle_text.setVisible(False)
    
                self.data_label_x.setVisible(False)
                self.data_text_x.setVisible(False)
    
                self.data_label_y1.setVisible(False)
                self.data_text_y1.setVisible(False)
    
                self.data_label_y2.setVisible(False)
                self.data_text_y2.setVisible(False)
    
                self.data_label_y1_name.setVisible(False)
                self.data_text_y1_name.setVisible(False)
    
                self.data_label_y2_name.setVisible(False)
                self.data_text_y2_name.setVisible(False)
    
                '''显示控件'''
                self.pie_table_label.setVisible(True)
                self.pie_table_text.setVisible(True)
    
                self.pie_data_label.setVisible(True)
                self.pie_data_text.setVisible(True)
    
                self.pie_radius.setVisible(True)
                self.pie_radius_text.setVisible(True)
    
                self.pie_radius_cle.setVisible(True)
                self.pie_radius_text_cle.setVisible(True)
    
        def generate_btn_click(self):
    
            selected = self.selected_cobox.currentText().strip()
            if selected == 'Pie(饼图)':
                pie_table_text = self.pie_table_text.text().strip()
                print(pie_table_text)
                pie_data_text_list = self.pie_data_text.text().strip().split(",")
                print(pie_data_text_list)
                list_data = []
    
                for str_ in pie_data_text_list:
                    d_list = str_.split(":")
                    tuple_ = (d_list[0],) + (int(d_list[1]),)
                    list_data.append(tuple_)
    
                print(list_data)
    
                pie_radius_text = self.pie_radius_text.text()
                print(pie_radius_text)
                pie_radius_text_cle = self.pie_radius_text_cle.text()
                print(pie_radius_text_cle)
    
                pie = Pie()
    
                pie.add(
                    series_name=pie_table_text,
                    data_pair=list_data,
                    radius=[pie_radius_text_cle, pie_radius_text],
                    rosetype='radius'
                )
    
                pie.set_series_opts(label_opts=options.LabelOpts(formatter='{b}:{d}%'))
    
                pie.set_global_opts(title_opts=options.TitleOpts(title=pie_table_text))
    
                html_file_path = self.save_dir_text.text().strip() + '/' + datetime.now().strftime("%Y%m%d%H%M%S") + '.html'
    
                print(html_file_path)
    
                pie.render(html_file_path)
    
                self.brower.setUrl(QUrl(html_file_path))
    
            elif selected == 'Bar(柱状图/条形图)':
                title = self.title_text.text().strip()
                subtitle = self.subtitle_text.text().strip()
                data_x = list(self.data_text_x.text().strip().split(","))
                data_y1 = list(self.data_text_y1.text().strip().split(","))
                data_y2 = list(self.data_text_y2.text().strip().split(','))
                bar = Bar()
                bar.add_xaxis(data_x)
                bar.add_yaxis(self.data_text_y1_name.text().strip(), data_y1)
                bar.add_yaxis(self.data_text_y2_name.text().strip(), data_y2)
    
                bar.set_global_opts(
                    title_opts=options.TitleOpts(title=title, subtitle=subtitle),
                    toolbox_opts=options.ToolboxOpts())
    
                bar.set_series_opts(
                    label_opts=options.LabelOpts(is_show=False),
                    markpoint_opts=options.MarkPointOpts(data=[
                        options.MarkPointItem(type_='min', name='最小值'),
                        options.MarkPointItem(type_='max', name='最大值')
                    ]))
                html_file_path = self.save_dir_text.text().strip() + '/' + datetime.now().strftime("%Y%m%d%H%M%S") + '.html'
                print(html_file_path)
                bar.render(html_file_path)
                self.brower.setUrl(QUrl(html_file_path))
            elif selected == 'Line(折线/面积图)':
                title = self.title_text.text().strip()
                subtitle = self.subtitle_text.text().strip()
                data_x = list(self.data_text_x.text().strip().split(","))
                data_y1 = list(self.data_text_y1.text().strip().split(","))
                data_y2 = list(self.data_text_y2.text().strip().split(','))
                line = Line()
                # 3. 关联数据
                line.add_xaxis(data_x)
    
                line.add_yaxis(self.data_text_y1_name.text().strip(), data_y1,
                               is_smooth=True)
    
                line.add_yaxis(self.data_text_y2_name.text().strip(), data_y2, markpoint_opts=options.MarkPointOpts(
                    data=[options.MarkPointItem(type_='min', name='最小值')]
                ))
    
                line.set_series_opts(markline_opts=options.MarkLineOpts(
                    data=[options.MarkPointItem(type_='average', name='平均值'),
                          options.MarkPointItem(type_='max', name='最大值')]
                ))
    
                line.set_global_opts(title_opts=options.TitleOpts(title=title, subtitle=subtitle))
    
                html_file_path = self.save_dir_text.text().strip() + '/' + datetime.now().strftime("%Y%m%d%H%M%S") + '.html'
                print(html_file_path)
                line.render(html_file_path)
                self.brower.setUrl(QUrl(html_file_path))

    公众号内回复"数据图表生成器",获取完整源代码。

    【往期精选】

    动态指针时钟:利用pyqt5制作指针钟表显示实时时间

    python 日志中最亮的仔,是喜欢的花里胡哨吖...

    hashlib.md5()函数来筛选出系统重复文件并移除...

    哈撒给,英雄联盟全皮肤下载器来了...

    PyQt5的敏感词检测工具制作,运营者的福音...

    手绘图片生成器:以雪容融为例一键生成...

    刚刚出炉的冬奥会吉祥物:冰墩墩,附源码...

    开工啦!批量向PDF文件添加中文水印...

    大年初二、做了一个windows通知管理器!

    百度图片下载器2.0

    gif动态图片生成器,多张图片组合后生成动图...

    python几个常见的数据处理操作,一行代码就能完成!

    更多相关内容
  • 租户筛选采用指标 WIP - 用于绘制 Buildium 租户筛选采用指标的概念证明。
  • 行式报表的数据筛选和过滤,很方便的选择自己所需要的数据
  • 1.利用数据透视图表展现不同城市的呼叫数与完单数的周总计,通过日期进行联动筛选;展现不同时段的呼叫数与完单数的周总计,通过城市进行联动筛选。 2.制作周报分别针对星期和时段统计过程指标,如:询价数、呼叫数...
  • 数据透视表中排序,筛选 数据透视表样式调整 更改数据透视表的汇总方式,计算字段,自定义分组 切片器 动态数据源,自动刷新的数据透视表 多数据数据透视表 数据透视图 该PPT包含了EXCEL中所有类型的图表数据透视...
  • 一个html小工具,随便一个浏览器就... 功能: 可以选择一个固定数据格式的excel文件,根据excel文件的数据,以平铺或堆叠的形式,生成对应的线图或柱状图或饼图。可保存图片到本地。 用到: xlsx.js、echarts.js
  • 图表数据透视表1.zip

    2020-10-10 08:26:33
    很全的关于EXCEL PPT课件,有理论知识,有案例。...数据透视表中排序,筛选 数据透视表样式调整 更改数据透视表的汇总方式,计算字段,自定义分组 切片器 动态数据源,自动刷新的数据透视表 多数据数据透视表 数据透视图
  • 数据图表-tableau快速入门学习教程,内涵相关学习数据源与视频教程
  • 数据图表展示:数据预处理过程(审核、筛选、排序、数据透视表)、数据的分类展示(频数、累计频数分布表、直方图、条形图、散点图)
  • jQuery+Echarts图表插件实现按年月数据统计柱状图表代码,按年月分类的访客数据统计分布图表实例代码。
  • Python数据可视化图表大全

    千次阅读 2022-04-19 01:08:56
    数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景,并且推荐了相应的制作工具。值得一看。点阵图点阵图表 (Dot Matrix Chart) 以点为单位显示离散...

    可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题。

    数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景,并且推荐了相应的制作工具。

    值得一看。

    点阵图

    27026f182dce668bfc43ebb383b3f93e.png

    点阵图表 (Dot Matrix Chart) 以点为单位显示离散数据,每种颜色的点表示一个特定类别,并以矩阵形式组合在一起。

    适合用来快速检视数据集中不同类别的分布和比例,并与其他数据集的分布和比例进行比较,让人更容易找出当中模式。

    点数图

    6376d02129de48100924e9f69735165e.png

    点数图 (Point & Figure Charts)也称为「P&F 图」,使用由 X 和 O 符号组成的一系列方格来显示特定资产的供需关系。

    这种图表与时间无直接关系,主要集中看资产的过滤价格表现;它也不会显示交易量,其目的只是显示任何供需关系上的变化,称为「突破」(breakouts)。

    推荐制作的工具有:rpnf。

    弧线图

    50cd6e5e919b3fe842ad10753dad0397.png

    弧线图 (Arc Diagram) 是二维双轴图表以外另一种数据表达方式。在弧线图中,节点将沿着 X轴放置,然后再利用弧线表示节点与节点之间的连接关系。

    弧线图适合用来查找数据共同出现的情况。但缺点是:不能如其他双轴图表般清楚显示节点之间的结构和连接,而且过多连接也会使图表难于阅读。

    推荐的制作工具有:Protovis (编程语言)、D3 (编程语言)。

    折线图

    0cd5dfd0b30b80004c766b0ba03f651c.png

    折线图用于在连续间隔或时间跨度上显示定量数值,最常用来显示趋势和关系。

    此外,折线图也能给出某时间段内的「整体概览」,看看数据在这段时间内的发展情况。

    推荐的制作工具有:MS Excel、Apple Numbers、D3、DataHero、Datamatic、Datawrapper、Envision.js、Google Charts、Google Docs、Infogr.am、OnlineChartTool.com、SlemmaVega。

    平行坐标图

    aaf80c311fb14ec22fe5911e532c5f46.png

    平行坐标图 (Parallel Coordinates Plots) 能显示多变量的数值数据,最适合用来比较同一时间的多个变量,并展示它们之间的关系。

    当数据密集时,平行坐标图容易变得混乱、难以辨认。解决办法是通过互动技术,突出显示所选定的一条或多条线,同时淡化所有其他线条,让我们能更集中研究感兴趣的部分,并滤除干扰数据。

    推荐的制作工具有:D3、Protovis、RAWGraphs、The R Graph Gallery、Vega。

    网络图

    7dd58905cc2ff999bd1d3be0e27f5467.png

    也称为「网络地图」或「节点链路图」,用来显示事物之间的关系类型。

    这些节点通常是圆点或小圆圈,但也可以使用图标。

    网络图主要有分别为「不定向」和「定向」两种。不定向网络图仅显示实体之间的连接,而定向网络图则可显示连接是单向还是双向(通过小箭头)。

    网络图数据容量有限,并且当节点太多时会形成类似「毛球」的图案,使人难以阅读。

    推荐的制作工具有:Cytoscape、Datamatic、Gephi、Graph-tool、Mike Bostock's Block、Plot.ly、sigmajs、Vega、ZoomCharts。

    象形图

    39958053edb4fa3a79b68ce98889959f.png

    象形图 (Pictogram Chart) 也称为「象形统计图」,使用图案来显示数据量。

    使用图案能克服语言、文化和教育水平方面的差异,是更具代表性的数据显示方法。举个例子,如果数据是「5 辆车」,图中便会显示 5 个汽车图案。

    推荐的制作工具有:Infogr.am、jChart。

    直方图

    de1258d773b7298da84909f821f76d54.png

    直方图适合用来显示在连续间隔或特定时间段内的数据分布,有助于估计数值集中位置、上下限值以及确定是否存在差距或异常值;也可粗略显示概率分布。

    推荐的制作工具有:MS Excel、Apple Numbers、D3、Datavisual、Google Docs、Infogr.am、OnlineChartTool.com、Protovis、R Graph Gallery、Slemma。

    密度图

    563c9a73560ef7fe443cd8c1f1dec724.png

    密度图 (Density Plot) 又称为「密度曲线图」,用于显示数据在连续时间段内的分布状况。

    这种图表是直方图的变种,使用平滑曲线来绘制数值水平,从而得出更平滑的分布,并且它们不受所使用分组数量的影响,所以能更好地界定分布形状 。

    推荐的制作工具有:The R Graph Gallery、Cookbook for R。

    人口金字塔

    6a21a209529db6a643c53345b52d06f4.png

    人口金字塔 (Population Pyramid) 也称为「年龄性别金字塔」,是彼此背靠背的一对直方图,显示所有年龄组和男女人口的分布情况。

    人口金字塔最适合用来检测人口模式的变化或差异。多个人口金字塔放在一起更可用于比较各国或不同群体之间的人口模式。

    推荐制作的工具有:AnyChart、D3 (重叠版本)、Vega、ZingChart。

    条形图

    63d4dedfc2782ae3c4180e0293198d8d.png

    条形图 (Bar Chart) 也称为「棒形图」或「柱形图」,采用水平或垂直条形(柱形图)来比较不同类别的离散数值。


    图表其中一条轴代表要比较的具体类别,另一条则用作离散数值的标尺。

    条形图的离散数据是分类数据,针对的是单一类别中的数量多少,而不会显示数值在某时间段内的持续发展。

    推荐的制作工具有:MS Excel & Apple Numbers、AnyChart、D3 、DataHero、Datamatic、Datawrapper、Google Charts、Google Docs、Infogr.am、OnlineChartTool.com、Protovis、Slemma、Vega、ZoomCharts。

    多组条形图

    7ebe9509e0fc2a358302aecaa3cc2712.png

    多组条形图也称为「分组条形图」或「复式条形图」,是条形图的变种。

    多组条形图通常用来将分组变量或类别与其他数据组进行比较,也可用来比较迷你直方图,每组内的每个条形将表示变量的显著间隔。

    但缺点是,当有太多条形组合在一起时将难以阅读。

    推荐的制作工具有:D3、DataHero、Datavisual、Datawrapper、Infogr.am、NVD3.js、R Graph Gallery、Slemma、Vega、Visage、ZoomCharts。

    堆叠式条形图

    c5b62dc5b94047fcc1ff49c0a10419d6.png

    跟多组条形图不同,堆叠式条形图 (Stacked Bar Graph) 将多个数据集的条形彼此重迭显示,适合用来显示大型类别如何细分为较小的类别,以及每部分与总量有什么关系。

    堆叠式条形图共分成两种:

    • 简单堆叠式条形图。将分段数值一个接一个地放置,条形的总值就是所有段值加在一起,适合用来比较每个分组/分段的总量。

    • 100% 堆叠式条形图。会显示每组占总体的百分比,并按该组每个数值占整体的百分比来绘制,可用来显示每组中数量之间的相对差异。

    推荐的制作工具有:MS Excel、Apple Numbers、AnyChart、Datavisual、Datawrapper、Infogr.am、Slemma、ZingChart、ZoomCharts。

    不等宽柱状图

    da3b0f496fc5e4402c409a04c4eb48b2.png

    不等宽柱状图 (Marimekko Chart)也称为「马赛克图」,用来显示分类数据中一对变量之间的关系,原理类似双向的 100% 堆叠式条形图,但其中所有条形在数值/标尺轴上具有相等长度,并会被划分成段。

    不等宽柱状图的主要缺点在于难以阅读,特别是当含有大量分段的时候。此外,我们也很难准确地对每个分段进行比较,因为它们并非沿着共同基线排列在一起。

    因此,不等宽柱状图较为适合提供数据概览。

    推荐的制作工具有:D3。

    面积图

    cdf970d6696450719fc8e262d5b705a6.png

    面积图 (Area Graph) 是折线图的一种,但线下面的区域会由颜色或纹理填满。

    跟折线图一样,面积图可显示某时间段内量化数值的变化和发展,最常用来显示趋势,而非表示具体数值。

    两种较常用的面积图是分组式面积图和堆叠式面积图。分组式面积图在相同的零轴开始,而堆叠式面积图则从先前数据系列的最后数据点开始。

    推荐的制作工具有:MS Excel & Apple Numbers、D3、DataHero、Datamatic、Google Charts、Google Docs、Infogr.am、Protovis、Slemma、VegaOnlineChartTool.com。

    比例面积图

    829324cf4adc9216d49686b7547b949a.png

    非常适合用来比较数值和显示比例(尺寸、数量等),以便快速全面地了解数据的相对大小,而无需使用刻度。

    比例面积图通常使用正方形或圆形,常见技术错误是,使用长度来确定形状大小,而非计算形状中的空间面积,导致数值出现指数级的增长和减少。

    推荐的制作工具有:D3、Datamatic、Datavisual、Infogr.am

    堆叠式面积图

    cdb299447ffb313afd849ec522805c01.png

    堆叠式面积图 (Stacked Area Graph) 的原理与简单面积图相同,但它能同时显示多个数据系列,每一个系列的开始点是先前数据系列的结束点。

    堆叠式面积图使用区域面积来表示整数,因此不适用于负值。总的来说,它们适合用来比较同一间隔内多个变量的变化。

    推荐的制作工具有:MS Excel、Apple Numbers、DataHero、Datavisual、Google Docs、Infogr.am、OnlineChartTool、Slemma、Vega、ZingChart、ZoomCharts。

    量化波形图

    cfdcd52aff1e74b5c439afa3e98eeb5c.png

    这种图表是堆叠式面积图的一种变体,但其数值并非沿着固定直线轴来绘制,而是围绕着不断变化的中心基线。

    通过使用流动的有机形状,量化波形图 (Stream Graph) 可显示不同类别的数据随着时间的变化,这些有机形状有点像河流,因此量化波形图看起来相当美观。

    在量化波形图中,每个波浪的形状大小都与每个类别中的数值成比例。与波形图平行流动的轴用作时间刻度。我们也可以用不同颜色区分每个类别,或者通过改变色彩来显示每个类别的附加定量值。

    此外,当他们以互动形式展示时,比静态或印刷出来更有效率。

    推荐的制作工具有:Bob Rudis' GitHub、D3、infogr.am、JSFiddle、Lee Byron's GitHub、NVD3.js、plotDB、Protovis、RAWGraphs、Stream graph generator。

    雷达图

    70491e4bcdf4ff0311f97af64adffdb9.png

    雷达图 (Radar Chart) 又称为「蜘蛛图」、「极地图」或「星图」,是用来比较多个定量变量的方法,可用于查看哪些变量具有相似数值,或者每个变量中有没有任何异常值。

    此外,雷达图也可用于查看数据集中哪些变量得分较高/低,是显示性能表现的理想之选。

    每个变量都具有自己的轴(从中心开始)。所有的轴都以径向排列,彼此之间的距离相等,所有轴都有相同的刻度。轴与轴之间的网格线通常只作指引用途。每个变量数值会画在其所属轴线之上,数据集内的所有变量将连在一起形成一个多边形。

    推荐的制作工具有:Amcharts、AnyChart、Google Docs、jChartFX、Online Chart Tool、ZingChart。

    桑基图

    cbef287959648ba9b94889a180bec1aa.png

    桑基图 (Sankey Diagram) 用来显示流向和数量。

    在每个流程阶段中,流向箭头或线可以组合在一起,或者往不同路径各自分开。我们可用不同颜色来区分图表中的不同类别,或表示从一个阶段到另一个阶段的转换。

    推荐的制作工具有:RAWGraphs、Sankey Diagram Generator、Sankey Diagrams Blog Software List、Sankey Flow Show、SankeyMATIC、Tamc。

    平行集合图

    e7981e6f805ad18cc36e8d1ba23582fe.png

    平行集合图与桑基图类似,都显示流程和比例,但平行集合图不使用箭头,它们在每个所显示的线集 (line-set) 划分流程路径。

    每个线集对应于一个维度/数据集,其数值/类别由该线集内的不同线段所表示。每条线的宽度和流程路径,均由类别总数的比例份数所决定。每条流程路径都可以用不同颜色代表,以显示和比较不同类别之间的分布。

    推荐工具有:EagerEyes: ParallelSets、Jason Davies、Sankey Diagram Generator、SankeyMATIC。

    误差线

    b0c46f9fc474893997e7598641aa67c3.png

    误差线可以作为一项增强功能来显示数据变化,通常用于显示范围数据集中的标准偏差、标准误差、置信区间或最小/最大值。

    误差线总是平行于定量标尺的轴线,可以是垂直或水平显示(取决于定量标尺是在 Y 轴还是 X 轴上)。

    推荐的工具有:AnyChart、Highcharts、plotly、Vega。

    树形结构图

    52e6caed302fa246a7953eb5e13b8eae.png

    树状结构图 (Treemap) 是一种利用嵌套式矩形显示层次结构的方法,同时通过面积大小显示每个类别的数量。

    每个类别会获分配一个矩形区域,而其子类别则由嵌套在其中的小矩形代表。当不同数量被分配到各个类别时,这些矩形的面积大小会与此数量成正比显示。

    Ben Shneiderman 最初开发树状结构图用来在计算机上显示大量文件目录,而不会占用太多屏幕空间,因此树状结构图是一种紧凑而且节省空间的层次结构显示方式,可让人快速了解结构。

    推荐的制作工具有:AnyChart、D3、Datamatic、Google Charts、Google Docs、Infogr.am、jChartFX、RAWGraphs、Slemma、Vega、ZingChart。

    圆堆积图

    ca60929523fd37c82147ba81b9611a18.png

    圆堆积 (Circle Packing) 也称为「圆形树结构图」,是树形结构图的变体,使用圆形(而非矩形)一层又一层地代表整个层次结构。

    每个圆形的面积也可用来表示额外任意数值,如数量或文件大小。我们也可用颜色将数据进行分类,或通过不同色调表示另一个变量。

    虽然圆堆积看起来漂亮,但不及树形结构图般节省空间(因为圆圈内会有很多空白处),可是它实际上比树形结构图更能有效显示层次结构。

    推荐的制作工具有:D3、D3 Zoomable、RAWGraphs。

    饼图

    4905c66f8710cd4dc030dd83c0e22479.png

    饼形图 (Pie Chart) 把一个圆圈划分成不同比例的分段,以展示各个类别之间的比例。

    饼形图适合用来快速展示数据比例分布,但主要缺点是:不能显示太多项目、通常需要图例说明、不能准确比较。

    制作工具有很多:D3、DataHero、Datamatic、Datavisual、Datawrapper、Google Charts、 Google Docs、Infogr.am、Protovis、OnlineChartTool.com、Slemma、ZingChart...

    圆环图

    7d90153a321909980d25202e908980bb.png

    圆环图 (Donut Chart) 基本上就是饼形图,只是中间的部分被切掉。

    不过,圆环图还是比饼形图略有优势,它让人不再只看「饼」的面积,反面更重视总体数值的变化:专注于阅读弧线的长度,而不是比较「饼与饼」之间的比例不同。

    另外,圆环图中间的空白处更可以用来显示其他信息,因此更能节省空间。

    推荐的制作工具有:D3、DataHero、Datamatic、Datavisual、Datawrapper、Google Docs、Infogr.am、Protovis、Slemma、Visage、ZingChart、ZoomCharts。

    南丁格尔玫瑰图

    fde0fae0bbe5279a1eeadb2974487c87.png

    南丁格尔玫瑰图 (Nightingale Rose Charts) 又称为「极面积图」。

    统计学家和医学改革家佛罗伦萨‧南丁格尔 (Florence Nightingale) 曾在克里米亚战争期间使用这种图表传达士兵身亡情况,故得名。

    在南丁格尔玫瑰图中,代表数值的是分段面积,而不是其半径。

    推荐的制作工具有:Datamatic、Infogr.am。

    旭日图

    e313bd87a1cbacd9c218c850f13ccdbf.png

    也称为「多层饼形图」或「径向树图」,通过一系列的圆环显示层次结构,再按不同类别节点进行切割。

    推荐的制作工具有:Aculocity、D3、JavaScript InfoVis Toolkit、MS Office、Protovis、RAWGraphs、

    螺旋图

    19296121864ec7b50309001d5fef944f.png

    也称为「时间系列螺旋图」,沿阿基米德螺旋线 (Archimedean spiral) 画上基于时间的数据。

    图表从螺旋形的中心点开始往外发展。螺旋图十分多变,可使用条形、线条或数据点,沿着螺旋路径显示。

    螺旋图很适合用来显示大型数据集,通常显示长时间段内的数据趋势,因此能有效显示周期性的模式。

    推荐的制作工具有:Arpit Narechania's Block。

    径向条形图

    52770741421216bab8f34008edfa5bb1.png

    径向条形图是在极坐标系上绘制的条形图。

    虽然看起来很美观,但径向条形图上条形的长度可能会被人误解。

    推荐制作工具有:AnyChart。

    径向柱图

    bde1e39a2ed02e1ed443cd4cd03c5365.png

    也称为「圆形柱图」或「星图」。

    这种图表使用同心圆网格来绘制条形图。每个圆圈表示一个数值刻度,而径向分隔线则用作区分不同类别或间隔(如果是直方图)。

    条形通常从中心点开始向外延伸,但也可以别处为起点以显示数值范围(如跨度图)。此外,条形也可以如堆叠式条形图般堆叠起来。

    推荐的制作工具有:jChartFX、Bokeh。

    热图

    6b574bac7791cc18a11364724c4d1ac5.png

    热图 (Heatmap) 通过色彩变化来显示数据,当应用在表格时,热图适合用来交叉检查多变量的数据。

    热图适用于显示多个变量之间的差异;显示当中任何模式;显示是否有彼此相似的变量;以及检测彼此之间是否存在任何相关性。

    由于热图依赖颜色来表达数值,它比较适合用来显示广泛数值数据,因为要准确地指出色调之间的差异始终有难度,也较难从中提取特定数据点(除非在单元格中加入原始数据)。

    推荐的制作工具有:MS Excel、Apple Numbers、Amcharts、AnyChart、Highcharts、jChartFX、plot.ly、R Graph、Zing Chart。

    散点图

    b90e89c191a1effcaa0c324367657215.png

    散点图 (Scatterplot) 也称为「点图」、「散布图」或「X-Y 点图」,用来显示两个变量的数值(每个轴上显示一个变量),并检测两个变量之间的关系或相关性是否存在。

    图表中可加入直线或曲线来辅助分析,并显示当所有数据点凝聚成单行时的模样,通常称为「最佳拟合线」或「趋势线」。

    如您有一对数值数据,可使用散点图来查看其中一个变量是否在影响着另一个变量。可是请记住,相关性并非因果关系,也有可能存在另一个变量在影响着结果。

    推荐的制作工具有:MS Excel、Apple Numbers、D3、DataHero、Datavisual、Google Charts、Google Docs、Infogr.am、OnlineChartTool.com、Vega、Visage、ZingChart。

    气泡图

    f704e8e6a848b31e466eeea668a60190.png

    气泡图是一种包含多个变量的图表,结合了散点图和比例面积图,圆圈大小需要按照圆的面积来绘制,而非其半径或直径。

    通过利用定位和比例,气泡图通常用来比较和显示已标记/已分类的圆圈之间的关系。

    可是,过多气泡会使图表难以阅读,但我们可以在图表中加入交互性功能来解决这个问题(点击或把鼠标悬停在气泡上以显示隐藏信息),也可选择重组或筛选分组类别。

    推荐制作的工具有:AnyChart、Google Charts、Google Docs、Infogr.am、jChartFX、Online Chart Tool、RAWGraphs、Slemma、Visage、ZingChart

    气泡地形图

    45d2c5eb9414f3f1af922523d3381999.png

    在这种数据地图中,指定地理区域上方会显示圆形图案,圆形面积与其在数据集中的数值会成正比。

    气泡地图适合用来比较不同地理区域之间的比例,而不会受区域面积的影响。但气泡地图的主要缺点在于:过大的气泡可能会与地图上其他气泡或区域出现重迭。

    推荐的制作工具有:AnyChart、CARTO、Datavisual、Khartis、Google docs、Polymaps、ZoomCharts。

    地区分布图

    471b968580b2b60dff9a0bf6023a07bd.png

    地区分布图通常用来显示不同区域与数据变量之间的关系,并把所显示位置的数值变化或模式进行可视化处理。

    我们在地图上每个区域以不同深浅度的颜色表示数据变量,例如从一种颜色渐变成另一种颜色、单色调渐进、从透明到不透明、从光到暗,甚至动用整个色谱。

    但缺点是无法准确读取或比较地图中的数值。此外,较大的地区会比较小区域更加显眼,影响读者对数值的感知。

    绘制地区分布图时的常见错误:对原始数据值(例如人口)进行运算,而不是使用归一化值(例:计算每平方公里的人口)。

    推荐的制作工具有:amMaps、D3、d3.geomap、Google Charts、Google Docs、DataHero、Datamatic、Datawrapper、Infogr.am、Kartograph、Polymaps、Slemma、Target Map.com、Vega。

    点示地图

    94c79cea8b5dd42496ef8bd5e0ea42db.png

    点示地图 (Dot Map) 也称为「点示分布图」或「点示密度图」。在地理区域上放置相等大小的圆点,旨在检测该地域上的空间布局或数据分布。

    点示地图共有两种:一对一(每点代表单一计数或一件物件)和一对多(每点表示一个特定单位,例如 1 点 = 10棵树)。

    点示地图非常适合用来查看物件在某地域内的分布状况和模式,而且容易掌握,能提供数据概览。

    推荐的制作工具有:AnyChart、CARTO、Datavisual、Infogr.am、Khartis、mbostock's blocks、R Graph Gallery、ZoomCharts。

    连接地图

    9b9c17bea868a22eb9d127096ed6f585.png

    连接地图 (Connection Map) 是用直线或曲线连接地图上不同地点的一种图表。

    连接地图非常适合用来显示地理连接和关系,也可以通过研究连接地图上的连接分布或集中程度来显示空间格局。

    推荐的制作工具是:AnyChart、ECharts、Javascript Maps、Curved、Straight、ZoomCharts。

    流向地图

    051e83c317d07c4b6a0a936ac99050d7.png

    流向地图 (Flow Map) 在地图上显示信息或物体从一个位置到另一个位置的移动及其数量,通常用来显示人物、动物和产品的迁移数据。

    单一流向线所代表的移动规模或数量由其粗幼度表示,有助显示迁移活动的地理分布。

    推荐的制作工具有:AnyChart。

    甘特图

    9b9557438956409e0b2e704cadc84b52.png

    甘特图 (Gantt Chart) 通常用作项目管理的组织工具,显示活动(或任务)列表和持续时间,也显示每项活动何时开始和结束。

    甘特图适合用来规划和估计整个项目的所需时间,也可显示相互重迭的活动。

    推荐的制作工具有:AnyChart、Amcharts、DHTMLX、GanttPro、Google Charts、Redbooth、RAWGraphs、Smartsheet。

    箱形图

    d03d07e91727db5e580913b4d5bd8680.png

    箱形图又称为「盒须图」或「箱线图」,能方便显示数字数据组的四分位数,可以垂直或水平的形式出现。

    从盒子两端延伸出来的线条称为「晶须」(whiskers),用来表示上、下四分位数以外的变量。异常值 (Outliers) 有时会以与晶须处于同一水平的单一数据点表示。

    箱形图通常用于描述性统计,是以图形方式快速查看一个或多个数据集的好方法。

    推荐的制作工具有:AnyChart、D3、Protovis、R AWGraphs、R Graph Gallery、ZingChart。

    子弹图

    8bcfb9a282dc7bafe80f04ea2d467c28.png

    子弹图 (Bullet Graph) 的功能类似于条形图,但加入更多视像元素,提供更多补充信息。

    子弹图最初由 Stephen Few 开发,用来取代仪表盘上如里程表或时速表这类图形仪表,解决显示信息不足的问题,而且能有效节省空间,更可除掉仪表盘上一些不必要的东西。

    推荐的制作工具有:am chartsAnyChart、D3、DimpleJS、IgniteUI、jChartFX 、moderndata.plot.ly、NVD3.js、Protovis。

    蜡烛图

    532c5ab382e3af5bfce8a82212d820d6.png

    又名「日本K线图」,通常用来显示和分析证券、衍生工具、外汇货币、股票、债券等商品随着时间的价格变动。

    蜡烛图通过使用烛台式的符号来显示多种价格信息,例如开盘价、收盘价、最高价和最低价,每个代表单一时间段(每分钟、每小时、每天或每月)的交易活动。每个烛台符号沿着 X 轴上的时间刻度绘制,显示随着时间推移的交易活动。

    但是,蜡烛图只能显示开盘价和收盘价之间的关系,而非两者之间所发生的事件,因此也无法用来解释交易波动的缘由。

    推荐的制作工具有:Aaron Beppu's Block、amcharts、AnyChart、CanvasJS、ECharts、Google Chart、Google Docs、infogr.am、plotly、Protovis、ZingChart、ZoomCharts

    跨度图

    997b3dcd4a956cc7242f61311354c86b.png

    也称为「范围条形/柱形图」或「浮动条形图」,用来显示数据集内最小值和最大值之间的范围,适合用来比较范围,尤其是已分类的范围。

    跨度图只集中显示极端数值,不提供任何关于最小值和最大值之间的数值、整体平均值或数据分布等其他信息。

    推荐制作工具有:AnyChart、D3, Arpit Narechania's Block、ZingChart。

    卡吉图

    8a5614834a77dfebe2ecd94dc5b4115a.png

    卡吉图 (Kagi Chart)能通过一系列线段显示价格表现,进而显示特定资产的一般供需水平。由于与时间无直接关系,它能更清晰地显示重要的价格走势。

    推荐的制作工具有:D3、Arpit Narechania's Block、FusionCharts、Ragu Ramaswamy's Block、Wolfram Mathematica、

    美国线

    5dc7cdad5d4335352206daf27698a8dc.png

    美国线 (Open-high-low-close Charts) 也称为「OHLC 图」或「价格图」,通常用作交易工具,显示和分析证券、货币、股票、债券等商品随时间的价格变动。

    推荐的制作工具有:Amcharts、AnyChart、ByteMuse.com、CanvasJS、jChartFX、Plotly、vaadin、Zing Chart。

    弦图

    fb15606f05a08794aebe323d0115c4c9.png

    弦图 (Chord Diagram) 可以显示不同实体之间的相互关系和彼此共享的一些共通之处,因此这种图表非常适合用来比较数据集或不同数据组之间的相似性。

    节点围绕着圆周分布,点与点之间以弧线或贝塞尔曲线彼此连接以显示当中关系,然后通过每个圆弧的大小比例再给每个连接分配数值。此外,也可以用颜色将数据分成不同类别,有助于进行比较和区分。

    推荐的制作工具有:Circos、D3、R Graph Gallery、ZingChart。

    非彩带弦图

    0d3f6f95279f1d81c1346cbea8d7cb02.png

    非彩带弦图 (Non-ribbon Chord Diagram) 是弦图的一个精简版本,仅显示节点和连接线,更加强调数据之间的连接关系。

    推荐的制作工具有:Circos。

    树形图

    85c8f26fc67ecf2bb73f0aa9bceab2e4.png

    树形图 (Tree Diagram) 也称为「组织图」或「链路图」,是通过树状结构表示层次结构的一种方式。

    其结构通常由没有上级/父级成员的元素开始(根节点),然后加入节点,再用线连在一起,称为分支,表示成员之间的关系和连接。最后是枝叶节点(或称为末端节点),是没有子节点的成员。

    树形图通常用于表示家庭关系和血统、分类学、进化科学、计算机科学与数学等,也是企业和组织的管理工具。

    推荐的工具有:Datamatic、Google Charts、Google Docs、giffy、Zoomcharts。

    流程图

    584cfc84674c42cf1cabe8bc869d2b20.png

    流程图 (Flow Chart) 使用一系列相互连接的符号绘制出整个过程,从而解释复杂和/或抽象的过程、系统、概念或算法的运作模式。

    不同符号代表不同意思,每种都具有各自的特定形状。流程图以弧形矩形表示流程的开始和结束;线段或箭头用于显示从一个步骤到另一个步骤的方向或流程;简单的指令或动作用矩形来表示,而当需要作出决定时,则使用钻石形状...

    推荐的制作工具有:asciiflow、Creately、draw.io、gliffy、GoJS、Google Drawings、LucidChart、MS Visio。

    脑力激荡图图

    3e932d68ea6c98b5be4cdfb5cabb43aa.png

    脑力激荡图也称为「心智图」,可以将相关想法、单词、图像和概念联合在一起。

    脑力激荡图经常在项目初期使用,用来产生想法、查找关联、分类想法、组织信息、显示结构和一般学习。

    推荐的制作工具有:Coggle、MindMup

    记数符号图表

    3d15d1e46c995d4dffe2d4c872fc6bdd.png

    记数符号图表 (Tally Chart) 既是记录工具,也可通过使用标记数字系统来显示数据分布频率。

    在绘制记数符号图表时,将类别、数值或间隔放置在同一个轴或列(通常为 Y 轴或左侧第一列)上。每当出现数值时,在相应的列或行中添加记数符号。

    完成收集所有数据后,把所有标记加起来并把总数写在下一列或下一行中,最终结果类似于直方图。

    推荐的制作工具有:纸和笔。

    日历图

    3bb75fdeb6efd1a9db519525f5861ee2.png

    人类曾开发出各种日历系统作为组织工具,帮助我们提前做好计划。我们也把日历当作可视化工具,适用于显示不同时间段的活动事件的组织情况。

    今天我们最常用的日历形式是公历,每个月份的月历由七个垂直列组成(代表每周七天),另有约五至六行以水平方式代表星期。

    可是,日历格式并没有严格规定,所以市面上有各式各样不同的设计,只要能以时间顺序显示日期或时间单位便可。

    推荐的制作工具有:TimeandDate.com、Calendar Creator、ZingChart

    时间线

    3d42b4f53d11416c8a425fdb01cddc0a.png

    时间线 (Timeline) 是以时间顺序显示一系列事件的图象化方式,主要功能是传达时间相关信息,用于分析或呈现历史故事。

    如果是按比例绘制的时间线,我们可以通过查看不同事件之间的时间间隔,了解事件发生的时间或即将在何时发生,从中查找时间段内的事件是否遵循任何模式,或者事件在该时间段内如何分布。

    有时时间线会与图表相互结合,显示定量数据随时间的变化。

    推荐的制作工具有:Google Charts、Timeline.js、Tiki-Toki、Vega。

    时间表

    51cf319f63d9aeaab95bf650867316f7.png

    时间表 (Timetable) 可用作预定事件、任务和行动的引用和管理工具。

    使用表格按时间顺序和/或字母顺序组织数据,能有助用户快速进行引用。

    象形图

    d55c7143ae9ee4371dfe91b8555389c9.png

    说明图旨在使用笔记、标签和图例来解释说明所显示的图像,以便解释概念或方法、描述物件或场所、显示事情的运作变化或帮助了解所显示的主题。

    所使用的图像可以是象征性、图像化或真实相片。

    茎叶图

    1418752655744777846220b815b365e8.png

    茎叶图 (Stem & Leaf Plots) 又称为「枝叶图」,是一种按位数 (place value)组织数据的方法,可用来显示数据分布。

    不变的位数由小至大、由上至下显示在中间的「茎」(通常是以十为单位),每个位数之内的数据则会成为「叶」并横向延伸。

    除了向读者快速提供数据分布信息之外,茎叶图也可用于突出异常值和查找模式。如果您有两个数据集,则可使用背对背或双重茎叶图来比较两者。

    推荐的制作工具有:CalculatorSoup、Easycalculation.com、Protovis。

    文氏图

    ee9e63f6bcb725de7ccc9d6d368429d7.png

    文氏图 (Venn Diagram) 也称为「集合图」,显示集与集之间所有可能存在的逻辑关系,每个集通常以一个圆圈表示。

    每个集都是一组具有共同之处的物件或数据,当多个圆圈(集)相互重迭时,称为交集 (intersection),里面的数据同时具有重迭集中的所有属性。

    推荐工具有:Datamatic、gliffy、R Graph Gallery、ZingChart。

    小提琴图

    1fc23fb3673061626bb68656ac3b0268.png

    小提琴图 (Violin Plot) 结合了箱形图和密度图的特征,主要用来显示数据的分布形状。

    中间的黑色粗条表示四分位数范围,从其延伸的幼细黑线代表 95% 置信区间,而白点则为中位数。

    推荐的制作工具有:The R Graph Gallery、seaborn、z-m-k's Blocks。

    字云图

    28d971077752861ffc065aef539628ec.png

    字云图 (Word Cloud) 也称为「标签云图」、「词云」等,每个此的大小与其出现频率成正比,以此显示不同单词在给定文本中的出现频率,然后将所有的字词排在一起,形成云状图案。

    在字云图上使用颜色通常都是毫无意义的,主要是为了美观,但我们可以用颜色对单词进行分类。

    推荐的制作工具有:D3、Datamatic、Infogr.am、R Graph Gallery、Vega、Visage、Wordclouds.com、Wordle、ZingChart。

    推荐阅读  点击标题可跳转

    56917237919151e1599d251c9294d68f.gif

    展开全文
  • 相应的书籍通过250个实战秘技的讲解,带领读者学习Excel图表数据分析高效办公实战技巧,无论是新手还是经常使用Excel的行家,都可以从本书中受益。 目录如下: 第1章 图表基础 1 第2章 图表编辑 24 第3章 图表...
  • ECharts提供了多图联动的能力(connect),能的可不仅仅是鼠标划过的详情显示,连接的多个图表会共享组件事件并且实现了保存图片时的自动拼接。 try this 》</p><p>值域漫游 基于坐标的图表(如地图、散点图)通过...
  • jQuery+echarts数据图表时间间隔和数据个数选择代码,自定义设置图表样式进行查看。
  • 再延伸一步,你可以通过上方的数据透视表,制作一份数据透视表,并且通过对数据透视图的美化可以达到以下的效果:可以在图表中做好排序,当你筛选某个产品,关于某个产品的排名情况一目了然,同时还可以前5名,或者前N名...

    大家好,这一章讲一个数据透视表的使用技巧!

    我自己还蛮常用的一种方法.

    假使你有一份销售数据,你可以用自己的数据去做类比:

    下方省去N行数据

    Excel数据处理高手职场速成班(Excel2019) - 知识兔

    那么你完全可以使用数据源制作数据透视表进行数据分析,并且搭配切片器来进行筛选.

    再延伸一步,你可以通过上方的数据透视表,制作一份数据透视表,并且通过对数据透视图的美化可以达到以下的效果:

    可以在图表中做好排序,当你筛选某个产品,关于某个产品的排名情况一目了然,同时还可以做前5名,或者前N名(根据自己的情况调整)进行颜色的差异凸显.

    在顶部还可以做一个相关的计算,譬如:Excel数据处理高手职场速成班(Excel2019) - 知识兔

    前5名在整个销售量的占比情况.

    整个过程流程流程清晰,不管你是什么样的数据应该都属于常用的数据透视表技巧类型.

    关于透视表中的操作细节还是比较多的.

    整个过程流程流程清晰,不管你是什么样的数据应该都属于常用的数据透视表技巧类型.

    关于透视表中的操作细节还是比较多的.

     

    展开全文
  • Excel数据分析与图表应用案例精粹_光盘 杨广于 清华大学出版社,2012 目录 第1章 公式与函数基本操作 1  1.1 Excel公式的基本操作 1  1.1.1 公式的输入与编辑 1  1.1.2 公式中的运算符 2  1.1.3 单元格的引用...
  • 通过图表可以很清楚的看到各项数据之间的关系:(下图是Echarts官网的一个例子) 数据可视化的好处 更直观的展示信息 清晰有效地传达与沟通信息 更容易洞察隐藏在数据中的信息 数据可视化的实现方式 ECharts是...

    本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2)

    数据可视化

    什么是数据可视化?

    数据可视化, 说白了, 就是把数据以更加直观的方式进行呈现。那什么方式是更加直观的方式呢? 就是图表。常言道, 文不如表, 表不如图, 人们大脑对图的敏感程度要比苍白无力的文字好很多。

    通过图表可以很清楚的看到各项数据之间的关系:(下图是Echarts官网的一个例子)
    在这里插入图片描述

    数据可视化的好处

    • 更直观的展示信息
    • 清晰有效地传达与沟通信息
    • 更容易洞察隐藏在数据中的信息

    数据可视化的实现方式

    ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库,兼容性强,底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    ECharts

    关于ECharts的使用可以参考官方网站

    ECharts的特性

    • 丰富的可视化类型
      提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
    • 多种数据格式无需转换直接使用
      内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,此外还支持输入 TypedArray 格式的数据。
    • 千万数据的前端展现
      通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量。
    • 移动端优化
      针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。
    • 多渲染方案,跨平台使用
      支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。
    • 深度的交互式数据探索
      提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
    • 多维数据的支持以及丰富的视觉编码手段
      对于传统的散点图等,传入的数据也可以是多个维度的。
    • 动态数据
      数据的改变驱动图表展现的改变。
    • 绚丽的特效
      针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。
    • ECharts的社区非常活跃

    一个ECharts实例

    模板:

    <div style="width: 600px;height:400px"></div>
    <script>
    	var mCharts = echarts.init(document.querySelector("div"))
    	var option= {}//待填充
    	mCharts.setOption(option)
    </script>
    

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <!-- 步骤1:引入echarts.js文件 -->
      <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.js"></script>
    </head>
    
    <body>
      <!-- 步骤2:准备一个呈现图表的盒子 -->
      <div id="main" style="width: 600px;height: 400px"></div>
      <script>
        // 步骤3:初始化echarts实例对象
        // 参数, dom,决定图表最终呈现的位置
        var mCharts = echarts.init(document.getElementById('main'))
        // 步骤4:准备配置项
        var option = {
          title: {
            text: '第一个 ECharts 实例'
          },
          xAxis: {
            type: 'category',//类目轴,适用于离散的类目数据。
            data: ['小明', '小红', '小王', '小李', '小张']
          },
          yAxis: {
            type: 'value'//数值轴,适用于连续数据。后边不用再跟数据了,数据在series的data里。
          },
          series: [
            {
              name: '语文',
              type: 'bar',
              data: [70, 92, 87, 65, 99]
            }
          ]
        }
        // 步骤5:将配置项设置给echarts实例对象
        mCharts.setOption(option)
      </script>
    </body>
    </html>
    

    通用配置var option = {}

    下面列举了常用的几个通用配置:

    一、标题:title

    更多配置项可以参考:传送门

    title: { // 标题设置
      text: '成绩展示', // 标题文字
      textStyle: { // 标题文字样式设置
        color: 'red'
      },
      borderWidth: 5, // 标题边框宽度
      borderColor: 'blue', // 标题边框颜色
      borderRadius: 5, // 标题边框圆角
      left: 50, // 标题距离左边的距离
      top: 10 // 标题距离顶部的距离
    }
    

    二、提示:tooltip

    更多配置项可以参考:传送门

    提示框浮层内容格式器,支持字符串模板回调函数两种形式。
    1.字符串模板
    模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

    • 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
    • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
    • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
    • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

    2.回调函数

    使用示例:

    tooltip: { // 工具提示
      // trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
      trigger: 'axis',
      triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过(默认)
      // formatter: '{b} 的成绩是 {c}'
      formatter: function(arg){ // 文字格式化
        return arg[0].name + '的分数是:' + arg[0].data
      }
    }
    

    三、工具按钮:toolbox

    更多配置项可以参考:传送门

    toolbox: { // 工具箱按钮
      feature: {
        saveAsImage: {}, // 导出图片
        dataView: {}, // 数据视图
        restore: {}, // 重置
        dataZoom: {}, // 区域缩放
        magicType: {
          type: ['bar', 'line']
        } // 动态图表类型的切换
      }
    }
    

    右上角的工具框即为toolbox的效果:
    在这里插入图片描述

    四、图例:legend

    更多配置项可以参考:传送门
    legend是图例,用于筛选类别,需要和series配合使用:

    • legend中的data是一个数组
    • legend中的data的值需要和series数组中某组数据的name值一致
    legend: { 
    // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
      data: ['语文', '数学']
    },
    xAxis: {
      type: 'category',
      data: xDataArr
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        data: yDataArr1
      },
      {
        name: '数学',
        type: 'bar',
        data: yDataArr2
      }
    ]
    

    当点击按钮”语文”时下边就会只显示数学项。
    在这里插入图片描述

    ECharts七大常用图表

    柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图

    直角坐标系下的三大图

    一、柱状图

    柱状图:准备option, 将series中的type的值设置为: bar

    坐标轴xAxis或者yAxis中的配置:type的值主要有两种: category和value, 如果type属性的值为category,那么需要配置data数据, 代表在x轴的呈现. 如果type属性配置为value,那么无需配置data, 此时y轴会自动去series下找数据进行图表的绘制。

    横向柱状图:只需要让x轴的角色和y轴的角色互换一下即可. 既xAxis的type设置为value, yAxis的type设置为category, 并且设置data即可。

    柱状图特点:柱状图描述的是分类数据,呈现的是每一个分类中『有多少?』, 图表所表达出来的含义在于不同类别数据的排名\对比情况

    <body>
      <div style="width: 600px;height:400px"></div>
      <script>
        var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
        var option = {
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: xDataArr
          },
          series: [
            {
              name: '语文',
              type: 'bar',
              markPoint: { // 标记点
                data: [
                  {
                    type: 'max', name: '最大值'
                  },{
                    type: 'min', name: '最小值'
                  }
                ]
              },
              markLine: { // 标记线
                data: [
                  {
                    type: 'average', name: '平均值'
                  }
                ]
              },
              label: { // 柱状图上的文字设置
                show: true, // 是否显示
                rotate: 60, // 旋转角度
                position: 'top' // 显示位置
              },
              barWidth: '30%', // 柱的宽度
              data: yDataArr
            }
          ]
        }
        mCharts.setOption(option)
      </script>
    </body>
    

    在这里插入图片描述

    二、折线图

    折线图:准备option, 将series中的type的值设置为: line
    特点:折线图更多的使用来呈现数据随时间的『变化趋势
    常见效果:它的用法和柱状图类似,也有最大值\最小值markPoint、平均值markLine……
    这里展示几个:标注区间markArea、线条控制(平滑线条smooth、线条样式lineStyle)、填充风格areaStyle、紧挨边缘boundaryGap、缩放, 脱离0值比例scale

    xAxis: {
     type: 'category',
      data: xDataArr,
      boundaryGap: false // 紧挨边缘:x轴的第1个元素是否与y轴有距离
    },
    yAxis: {
      type: 'value',
      scale: true // 缩放:脱离0值比例,设为true则使y值无需从0开始
    },
    series: [
     {
        name: '销量',
        data: yDataArr,
        type: 'line',
        markArea: { // 标记区域
          data: [
            [//起始
              {
                xAxis: '1月'
              },
              {
                xAxis: '2月'
              }
            ],
            [
              {
                xAxis: '7月'
              },
              {
                xAxis: '8月'
              }
            ]
          ]
        },
        smooth: true, // 是否为平滑线
        lineStyle: { // 线的样式设置
          color: 'green',
          type: 'solid' // dashed dotted solid
        },
        areaStyle: { // 线和x轴形成的区域设置
          color: 'pink'
        }
      }
    ]
    

    在这里插入图片描述
    堆叠图:堆叠图指的是, 同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加;折线图的series里需要配置两个对象。

    series: [
      {
        type: 'line',
        data: yDataArr,
        stack: 'all', // 堆叠图的设置
        areaStyle: {}
      },
      {
        type: 'line',
        data: yDataArr2,
        stack: 'all', // 堆叠图的设置,与上边相同就行,名字无所谓
        areaStyle: {}
      }
    ]
    

    在这里插入图片描述

    三、散点图

    散点图:准备option, 将series中的type的值设置为: scatter。

    特点:散点图可以帮助我们推断出不同维度数据之间的相关性, 比如下面例子中,看得出身高和体重是正相关, 身高越高, 体重越重;散点图也经常用在地图的标注上

    常见效果:气泡图效果要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同symbolSize控制散点的大小itemStyle.color控制散点的颜色。这两个配置项都支持固定值的写法, 也支持回调函数的写法。

    var option = {
     xAxis: {
       type: 'value',
       scale: true
     },
     yAxis: {
       type: 'value',
       scale: true
     },
     series: [
       {
         type: 'scatter',
         data: axisData,
         // symbolSize: 30
         symbolSize: function (arg) { // 控制散点的大小
           // console.log(arg)
           var height = arg[0] / 100
           var weight = arg[1]
           // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
           var bmi = weight / (height * height)
           if (bmi > 28) {
             return 20
           }
           return 5
         },
         itemStyle: { // 控制散点的样式
           color: function (arg) {
             // console.log(arg)
             var height = arg.data[0] / 100
             var weight = arg.data[1]
             // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
             var bmi = weight / (height * height)
             if (bmi > 28) {
               return 'red'
             }
             return 'green'
           }
         }
       }
     ]
    }
    

    涟漪动画效果:将type的值从scatter设置为effectScatter就能够产生涟漪动画的效果。

    type: 'effectScatter', // 指明图表为带涟漪动画的散点图
    showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis
    rippleEffect: {
      scale: 10 // 涟漪动画时, 散点的缩放比例
    },
    

    在这里插入图片描述

    直角坐标系的常见配置

    直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有:
    柱状图、折线图、散点图
    针对于直角坐标系的图表, 有一些通用的配置:(都在option下)

    配置1: 网格grid

    grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的。

    var option = {
    	grid: { // 坐标轴容器
    	  show: true, // 是否可见
    	  borderWidth: 10, // 边框的宽度
    	  borderColor: 'red', // 边框的颜色
    	  left: 120, // 边框的位置
    	  top: 120,
    	  width: 300, // 边框的大小
    	  height: 150
    	},
    	……
    }
    
    配置2: 坐标轴axis

    坐标轴分为x轴和y轴, 一个grid中最多有两种位置的x轴和y轴。
    坐标轴类型type:

    • value: 数值轴, 自动会从目标数据中读取数据
    • category: 类目轴, 该类型必须通过data设置类目数据

    坐标轴位置:

    • xAxis: 可取值为top或者bottom
    • yAxis: 可取值为left或者right
    xAxis: {
      type: 'category',
      data: [1,123,4,5,6],
      position: 'top' // 控制坐标轴的位置
    },
    yAxis: {
      type: 'value',
      position: 'right' // 控制坐标轴的位置
    }
    
    配置3: 区域缩放dataZoom

    dataZoom用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom是一个数组, 意味着可以配置多个区域缩放器。
    区域缩放类型type:

    • slider: 滑块
    • inside: 内置, 依靠鼠标滚轮或者双指缩放

    产生作用的轴:

    • xAxisIndex:设置缩放组件控制的是哪个x轴, 一般写0即可
    • yAxisIndex:设置缩放组件控制的是哪个y轴, 一般写0即可

    指明初始状态的缩放情况:

    • start: 数据窗口范围的起始百分比
    • end: 数据窗口范围的结束百分比
    dataZoom: [ // 控制区域缩放效果的实现
      {
        type: 'slider', // 缩放的类型  slide代表滑块  inside代表依靠鼠标滚轮
        // type: 'inside'
        xAxisIndex: 0 // 作用于第0个x轴
      },
      {//若y轴不要缩放则把这块删了
        type: 'slider',
        yAxisIndex: 0,// 作用于第0个y轴
        start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
        end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
      }
    ]
    

    在这里插入图片描述

    之前还有个工具按钮也可以实现简单的区域缩放:

    toolbox: {
      feature: {
        dataZoom: {}
      }
    }
    
    展开全文
  • datagridview 数据实现自动筛选,内附使用说明。
  • 数据透视表 筛选 筛选器选择中的数据透视图标题 (Pivot Chart Title from Filter Selection) Instead of adding a static title to your Pivot Chart, use a worksheet formula to create a dynamic chart title....
  • 数据图表展示

    千次阅读 2019-11-03 14:24:03
    数据的预处理是在对数据分类或分组之前所的必要处理,内容包括数据的审核、筛选、排序等。 1.1数据预处理 1.1.1 数据审核 数据审核就是检查数据中是否有错误。通过原始数据(raw data),需要从完整性和准确性两个...
  • 相比常规的数据筛选操作,数据透视表就显得尤为强大,它可以通过内置的各种功能,以可视化的操作,方便地实现数据的去重、汇总、计数等操作。具体操作如下。1.选择要生成'数据透视表'的表格,点击'插入',点击'数据...
  • VB生成图表-单月数据分析,我觉得这是个相当不错的统计分析例子,具有多种筛选数据的功能,还可对筛选出的数据进行报表,以直方图(柱状图)的方式进行报表显示,非常直观,且本例结合了Access数据库来实现相关的...
  • 如何将excel中的部分数据做图表数据透视表岂不更简单???Excel表格作图中X轴的刻度怎么设置?图表当中的X轴刻度也就是横坐(在2003版本里面叫分类轴)的刻度。选图表X轴——右键——设置坐标轴格式——坐标轴选项...
  • 数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景,并且推荐了相应的制作工具。 值得一看。 点阵图 点阵图表 (Dot Matrix Chart) 以点为单位...
  • 数据的预处理是在对数据分类或分组之前所的必要处理,内容包括数据的审核、筛选、排序等。 数据审核 数据审核就是检查数据中是否有错误。对于通过调查取得的原始数据,主要从完整性和准确性两个方面去审核。 ...
  • echarts数据图表时间个数选择代码是一款jQuery基于echarts.js制作选择时间间隔和选择数据个数,自定义设置图表样式代码。
  • 基于element-ui封装的一个VUE筛选下拉框
  • 利用Kibana图表化Elasticsearch中的数据

    万次阅读 2017-11-28 18:18:23
    利用Kibana图表化Elasticsearch中的数据1. 背景Kibana 是一个开源分析和可视化平台,旨在可视化操作 Elasticsearch 。Kibana可以用来搜索,查看,和存储在 Elasticsearch 索引中的数据进行交互。可以轻松地进行高级...
  • 选择【数据模型】-【添加数据模型】-依次选择【指标卡】、【仪表图】两种图表类型; 以统计销售额为例,拖入【销售额】至指标内,自动求和,同时可设置【环比】、【同比】 可筛选统计时间,有三种筛选方式,...
  • 但是很多设计师不懂可视化当中不同用途的图表规范,只是为了设计出好看的数据图表,在不停的寻找设计灵感参考,最终发现了即使有漂亮的可视化数据图表,但却不能用在自己的项目上非常可惜。 为什么会出现这样的情况...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,711
精华内容 12,284
关键字:

如何筛选数据做图表