精华内容
下载资源
问答
  • 数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 Apache Echarts简介:https://blog.csdn.net/diviner_s/article/details/115934089 项目最终效果图: 此篇博客为自己学习pink老师的...

    数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789
    Apache Echarts简介:https://blog.csdn.net/diviner_s/article/details/115934089
    项目最终效果图:
    在这里插入图片描述
    此篇博客为自己学习pink老师的课后完成的项目的总结与记录,仅供交流参考。版权所有,转载请标注原作者!
    使用echarts技术做的可视图,此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。

    写到这里我们的系列文也到了前端最后一个界面,做左侧第一个柱状图跳转子界面。

    预告:下一篇开始就我们将前后端进行分离以及实现前后端交互。

    实现数据动态获取

    目的是使用同一个界面图表模板,通过点击不同的元素实现传输对应的不同数据进行展示。

    左侧跳转界面不同数据展示
    在这里插入图片描述
    右侧跳转界面不同数据展示
    在这里插入图片描述

    cookie存储信息

    Cookie 用于存储 web 页面的用户信息。在这里我们用cookie存储首页面点击柱状图元素下标
    在这里插入图片描述

    如上图,我们继续看针对左上柱状图的每个柱状体都对应着不同下标,因此我们使用cookie暂时存储下标。

    cookie创建

    • 创建cookie:document.cookie = params.dataIndex默认情况下,cookie 在浏览器关闭时删除。
      我们现在首页左上柱状图试验一下:
      这段代码位置:
      在这里插入图片描述
      我们使用如下代码,打印获取的dataIndex和cookie值:

            //4.点击柱状图跳转
            myChart1.on('click', function (params) {
              console.log('dataIndex: ' + params.dataIndex);
              document.cookie = params.dataIndex;
              console.log('cookie: ' + document.cookie);
              //cookie传递params的数组下标
              //获取统计数据
              
      		//先将跳转界面注释掉			
              //  window.location.href = 'childpage.html';
            });
      

    点击不同柱体打印的就是不同cookie值,看右侧打印情况:
    在这里插入图片描述
    因此我们已经将对应index存入cookie,接下来就是读取cookie。

    cookie读取

    在 JavaScript 中, 可以使用var x = document.cookie来读取 cookie。

    注意:document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;

    返回格式是字符串+;返回,因此我们使用分隔符取“‘;”前的数。

    var jsonstr = document.cookie.split(';')[0];

    在这里插入图片描述

    子页面一

    跳转动画展示
    在这里插入图片描述
    子页面展示
    在这里插入图片描述
    子页面给出两个图表,分别是关于行业分布的柱状图和关于行业班级比例的扇形图。

    纵向柱状图

    图表还不会配置的来这里!,后面直接放代码。
    数据来源:采用Ajax的get(url,function())请求获取数据
    这里需要注意的是:function是回调函数需要获取数据后存放在ret后,在done中进行数据的解析。

    (function () {
    	// 使用cookie存点击的数据
      var jsonstr = document.cookie.split(';')[0];
    
      console.log("cookie:" + jsonstr);
      
      //ajax的get请求获取数据
      $.get("data/case0", function (ret, status) {
    
        var job = []
        var number = []
        console.log("data长度:" + ret[jsonstr].length)
        console.log(ret)
        var maxn = 0;
        for (var i = 0; i < ret[jsonstr].length; i++) {
          var name = ret[jsonstr][i].name
          var num = ret[jsonstr][i].number
          if (maxn < num) maxn = num
          console.log(name + " " + num + "  ==== ")
          job.push(name)
          number.push(num)
        }
        // console.log(job)
        // console.log(number)
    
        var mCharts1 = echarts.init(document.getElementById("div1"))
        option1 = {
          grid: { containLabel: true },
          xAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff',
              fontSize: "15"
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                //width:'1'
              }
            }
          },
          yAxis: {
            name: '职业',
            type: 'category',
            axisLabel: {
              //color: "rgba(255,255,255,.6) ",
              color: '#fff',
              fontSize: "20"
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                //width:'1'
              }
            },
            data: job,
          },
          visualMap: { //控制颜色渐变
            orient: ' ',
            left: 'center',
            min: 1,
            max: maxn,
            textStyle: {
              fontSize: 20,
              color: '#fff'
            },
            text: ['', '就业人数:'],
            // Map the score column to color
            dimension: 0,
            inRange: {
              color: ['#65B581', '#FFCE34', '#FD665F']
            }
          },
          
          series: [{
            data: number,
            type: 'bar',
            barWidth: "50%",
            label: {
              show: false
            },
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 10
            }
          }],
        };
    
        mCharts1.setOption(option1)
    
      });
    })();
    

    环形图

    (function () {
      var jsonstr = document.cookie.split(';')[0];
    
      //console.log("cookie2:" + jsonstr);
    
      $.get("http://127.0.0.1:8888/api/banjibili", function (ret, status) {
    
        console.log(ret)
        console.log(ret[jsonstr])
        var mCharts2 = echarts.init(document.getElementById("div2"))
        option2 = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          color: [
            "#FE642E",
            "#FE9A2E",
            "#F4FA58",
            "#ACFA58",
            "#01DFD7",
            "#0096ff",
            "#8258FA",
            "#FE2E9A"
          ],
          legend: {
            top: "bottom",
            left: "center",
            //bottom: '0',
            textStyle: {
              color: '#fff',
              fontSize: 18
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: ret[jsonstr]
            }
          ]
        };
        mCharts2.setOption(option2);
    
        /*******高亮显示开始**********/
        var _this2 = this
        var isSet2 = true // 为了做判断:当鼠标移动上去的时候,自动高亮就被取消
        var currentIndex2 = 0
    
        // 2、鼠标移动上去的时候的高亮动画
        mCharts2.on('mouseover', function (param) {
          isSet2 = false
          clearInterval(_this2.startCharts)
          // 取消之前高亮的图形
          mCharts2.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex2
          })
          // 高亮当前图形
          mCharts2.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
          // 显示 tooltip
          mCharts2.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        })
        // 3、自动高亮展示
        chartHover = function () {
          var dataLen = mCharts2.getOption().series[0].data.length //计算总的数组长度
          // 取消之前高亮的图形
          mCharts2.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex2
          })
          currentIndex2 = (currentIndex2 + 1) % dataLen
          // 高亮当前图形
          mCharts2.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex2
          })
          // 显示 tooltip
          mCharts2.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex2
          })
        }
        _this2.startCharts = setInterval(chartHover, 1000)
        // 4、鼠标移出之后,恢复自动高亮
        mCharts2.on('mouseout', function (param) {
          if (!isSet2) {
            _this2.startCharts = setInterval(chartHover, 1000)
            isSet2 = true
          }
        })
        /*******高亮显示结束**********/
    
    
      });
    })();
    
    

    子页面二

    跳转动画展示
    在这里插入图片描述
    子页面展示

    在这里插入图片描述

    柱状图

    (function () {
      //不同就业去向
      var jsonstr = document.cookie.split(';')[0];
      console.log("cookie:" + jsonstr);
      $.get("http://127.0.0.1:8888/api/nannv", function (ret, status) {
    
        var data1 = ret[jsonstr].data;
        var myChart = echarts.init(document.getElementById("div1"));
        var option = {
          legend: {
            bottom: "0%",
            textStyle: {
              color: "write"
            }
          },
          tooltip: {},
          dataset: {
            dimensions: ['product', '男', '女'],
            source: data1
          },
    
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff',
              fontSize: "20"
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',
              }
            },
          },
          yAxis: {
            name: "人数",
            axisLabel: {
              color: '#fff',
              fontSize: "20"
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',
              }
            },
          },
          barWidth: "30%",
          series: [
            {
              type: 'bar', itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 221, 255)'
                }, {
                  offset: 1,
                  color: 'rgba(77, 119, 255)'
                }])
              },
              label: {
                show: true,
                position: 'top',
                color: "white",
                fontSize: 20
              },
              barGap: "20%"
            },
            {
              type: 'bar', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 0, 135)'
              }, {
                offset: 1,
                color: 'rgba(135, 0, 157)'
              }]),
              label: {
                show: true,
                position: 'top',
                color: "white",
                fontSize: 20
              },
            },
    
          ]
        };
        myChart.setOption(option);
      })
    })();
    

    饼图

    (function () {
      //班级男生人数
      var jsonstr = document.cookie.split(';')[0];
      $.get("http://127.0.0.1:8888/api/nannv", function (ret, status) {
        var data1 = ret[jsonstr].nan;
        //班级女生人数
        var data2 = ret[jsonstr].nv;
        var myChart = echarts.init(document.getElementById('div2'));
        var option;
        option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              // do some thing
              console.log(params)
              return params.name + ":" + params.value + "人"
            }
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left',
          //   bottom: "0%",
          //   itemWidth: 30,
          //   itemHeight: 30,
          //   textStyle: {
          //     color: "write"
          //   }
          // },
          series: [
            {
              type: 'pie',
              radius: '60%',
              itemStyle: {
                normal: {
                  label: {
                    fontSize: 20,
                    show: true,
                    position: [0, -20],
                    color: '#ddd',
                    formatter: function (params) {
                      var percent = 0;
                      var total = 0;
                      total += data1 + data2;
                      percent = ((params.value / total) * 100).toFixed(0);
                      if (params.name !== '') {
                        return params.name + ':' + percent + '%';
                      } else {
                        return '';
                      }
                    },
                  },
                  labelLine: {
                    length: 15,
                    length2: 10,
                    show: true,
                    color: '#00ffff',
                  },
                },
              },
    
              data: [
                {
                  value: data1, name: '男',
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(0, 221, 255)'
                    }, {
                      offset: 1,
                      color: 'rgba(77, 119, 255)'
                    }])
                  }
                },
                {
                  value: data2, name: '女',
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255, 0, 135)'
                    }, {
                      offset: 1,
                      color: 'rgba(135, 0, 157)'
                    }])
                  }
                }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
    
      })
    })()
    

    CSS界面布局

    两个子界面使用的同一个CSS布局

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li {
      list-style: none;
    }
    /* 声明字体*/
    @font-face {
      font-family: electronicFont;
      src: url(../font/DS-DIGIT.TTF);
    }
    body {
      background: url(../images/bg.jpg) no-repeat top center;
      line-height: 1.15;
      overflow:hidden;
    }
    header {
      position: relative;
      height: 1.25rem;
      background: url(../images/head_bg.png) no-repeat;
      background-size: 100% 100%;
    }
    header h1 {
      font-size: 0.475rem;
      color: #fff;
      text-align: center;
      line-height: 1rem;
    }
    header .showTime {
      position: absolute;
      right: 0.375rem;
      top: 0;
      line-height: 0.9375rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.25rem;
    }
    .mainbox {
      display: flex;
      min-width: 1024px;
      max-width: 1920px;
      margin: 0 auto;
      padding: 1.4rem 0.125rem 0;
    }
    .mainbox .column {
      flex: 5;
    }
    .mainbox .column:nth-child(2) {
      flex: 3;
      margin: 0 0.125rem 0.1875rem;
      overflow: hidden;
    }
    .mainbox .panel {
      position: relative;
      height: 9rem;
      padding: 0 0.1875rem 0.1rem 0.5rem;
      border: 1px solid rgba(25, 186, 139, 0.17);
      margin-bottom: 0.1875rem;
      background: url(../images/line.png) rgba(255, 255, 255, 0.03);
    }
    .mainbox .panel::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    .mainbox .panel::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    .mainbox .panel .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .mainbox .panel .panel-footer::before {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
      content: "";
    }
    .mainbox .panel .panel-footer::after {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
      content: "";
    }
    .mainbox .panel h2 {
      height: 0.6rem;
      color: #fff;
      line-height: 1.6rem;
      text-align: center;
      font-size: 0.45rem;
      font-weight: 400;
    }
    
    .mainbox .panel .chart {
      height: 8rem;
    }
    
    
    


    有不懂的可以私聊我,有需要echarts.js、jQuery.js、echarts-gl.js开源库。
    评论区留下邮箱,我看到都会发给你的。


    项目源码我放在我的分享的资源里了,需要请自取

    展开全文
  • 可视化图表分类.xmind

    2020-09-29 14:20:16
    可视化图表的分类,分为四个大类,按照比较,分布,构成,联系进行划分,每一个大类下面区分出详细的可视化图表
  • 全国省份可视化图表.rplib
  • Echarts数据可视化图表案例:包括柱图,饼图,折线图,地图等数据展示图表;案例下载后直接使用webstrom或idea打开,在编辑器内打开html
  • 信息可视化图表设计

    2021-02-20 21:34:44
    信息可视化包括了信息图形、知识、科学、数据等的可视化表现形式,以及视觉可视化设计方面的进步与发展。地图、表格、图形,甚至包括文本在内,都是信息的表现形式,无论它是动态的或是静态的,都可以让我们从中了解...
  • 公司销售数据可视化图表.xlsx
  • 结果很多人花了大力气做可视化图表,却没达到想要的效果。 那么,如何让数据“说人话”,让受众更快速地懂你呢?本文梳理了可视化的相关内容,分享给大家。 一、你的数据适合哪种可视化图表 数据可视化有很多既定的...

    每到月度、季度、年度总结的时候,用到最多的、最有说服力的就是数据了。让数据说话,摆事实、讲道理才能赢得上级的肯定。

    大家都听过“数据可视化”,也知道要用直观的图表让受众理解复杂多变的数据。但很多人往往只注重让图表看上去“高大上”,而忽视了“这些的数据究竟适合哪些图表来表达”。结果很多人花了大力气做可视化图表,却没达到想要的效果。

    那么,如何让数据“说人话”,让受众更快速地懂你呢?本文梳理了可视化的相关内容,分享给大家。

    一、你的数据适合哪种可视化图表

    数据可视化有很多既定的图表类型,下面我们分别来谈谈这些图表类型,他们的使用场景,以及使用的优势和劣势。

    1、柱状图

    在这里插入图片描述

    使用场景:它的适用场合是二维数据集(每个数据点包括两个值 x 和 y),但只有一个维度需要比较。

    优势:柱状图利用柱子的高度,反映数据的差异。肉眼对高度差异很敏感,辨识效果非常好。

    劣势:柱状图的局限在于只适用中小规模的数据集。

    2、折线图

    在这里插入图片描述

    使用场景:折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合。它还适合多个二维数据集的比较。

    优势:容易反应出数据变化的趋势。

    3、饼图

    在这里插入图片描述

    使用场景:适用简单的占比图,在不要求数据精细的情况下可以使用。

    优势:可以清晰表达同一个整体中,不同成分的比例关系。

    劣势:肉眼对面积大小不敏感。

    饼状图是面积图的一种,但是因为其劣势明显,所以在使用饼状图及其他类型面积图时,注意用数字标明占比情况。

    4、漏斗图

    在这里插入图片描述

    使用场景:漏斗图适用于业务流程比较规范、周期长、环节多的流程分析,通过漏斗各环节业务数据的比较,能够直观地发现和说明问题所在。

    优势:能够直观地发现和说明问题所在。

    在网站分析中,通常用于转化率比较,它不仅能展示用户从进入网站到实现购买的最终转化率,还可以展示每个步骤的转化率。

    劣势:单一漏斗图无法评价网站某个关键流程中各步骤转化率的好坏。

    5、地图

    在这里插入图片描述

    使用场景:适用于有空间位置的数据集。

    优劣势:特殊状况下使用。

    6、雷达图

    在这里插入图片描述

    雷达图是一种类似蜘蛛网的网状图,可以对两组项目的多种变量的项目进行对比,它可以反映数据相对中心点和其他数据点的变化情况,可以清楚地反映事物的整体情况。

    使用场景:雷达图适用于多维数据(四维以上),且每个维度必须可以排序。

    但是,它有一个局限,就是数据点最多6个,否则无法辨别,因此适用场合有限。

    劣势:需要注意的时候,用户不熟悉雷达图,解读有困难。使用时尽量加上说明,减轻解读负担。

    其实想要实现炫酷的数据可视化,工具只是其中一方面,如何结合自身的需求和场景选择适合自己的工具才是最重要的;而Smartbi作为一款数据分析工具,最大的好处就是简单容易上手,而且不需要你有编码和程序基础,就可以实现超炫的图表效果,让你的老板看傻眼!

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • Axure数据可视化图表通用组件库,
  • Axure9动态可视化图表

    2021-02-08 14:21:46
    Axure9动态可视化图表
  • 对需要在大屏幕,用可视化图表进行展示大数据的动态内容。这是一个非常好的参数。整理的非常全面,各关各个行业的,不同布局,不同数据设计。可以供大家下载下来进行学习参数。
  • powerbi visual 可视化图表资源大合集
  • 可视化词典中文版——可视化图表解析; 辅助你进行图表可视化学习,掌握数据对应的可视化形式。 比如柱状图、条形图、面积图、散点图等图形,适用于何种场景的展现。
  • 网络研讨会可视化网络图表ChartJS 马德里举行的ChartJS网络研讨会的材料可视化研究45分钟-六月2020年 乌鲁木齐侦探。 葡萄球菌 练习视频COMPLETO德尔研讨会(部分1) 。 练习视频COMPLETO德尔研讨会(部分2) 安装...
  • 本作品是由AxueUX整理的一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种常用图表类型和全国34个省级行政区地图,可以满足大部分的原型设计图表...
  • 可视化图表组件库-包含动静两种图表,可导入组合库直接使用,亲测Axure8和9均可使用。
  • python+pyecharts生成网页可视化图表,同一张网页生成多个图标
  • Unity可视化图表插件,支持折线图、柱状图、饼图、雷达图、散点图、热力图、仪表盘、环形图等常见图表。包含插件以及Demo各种图标案列.
  • Axure数据可视化图表(内含18种图表及其
  • 可视化图表有很多种,这篇文章主要介绍了Python绘制六种可视化图表详解的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 使用vue.js封装sChart.js可视化图表库,方便在vue项目中快速生成图表。
  • 当然,你可能想象不到这种数据可视化的技术可以追溯到2500年前世界上的第一张地图,但是,如今利用各种形态的数据可视化图表帮助用户减少分析时间,快速做出决策一直扮演着重要的作用。 在数字经济时代,人们需要对...
  • DC.js:一个 JavaScript 数据可视化图表库。通过单击一个图上的特定数据点,其他人使用新数据进行更新,维度图表非常精彩。DC 使用一个名为 crossfilter 的优秀 JavaScript 库来实现这些动态可视化。
  • Axure9元件 数据可视化图表组件库
  • 可视化图表模板.zip

    2019-07-09 14:59:29
    内含200套Excel列表,各种可视化图标,每套列表对应列表图片;每个列表可作模板使用,可编辑拆分,满足各种日常列表统计需求
  • 数据可视化图表类型In the current era of large amounts of information in the form of numbers available everywhere, it is a difficult task to understand and get insights from these dense piles of data....

    数据可视化图表类型

    In the current era of large amounts of information in the form of numbers available everywhere, it is a difficult task to understand and get insights from these dense piles of data.

    在当今时代,到处都是数字形式的大量信息,要理解并从这些密集数据堆中获得洞察力是一项艰巨的任务。

    Data visualisation is the way which helps us in understanding what data tells us. It is more meaningful and appropriate when we use suitable charts to visualise data and get insights from it.

    数据可视化是帮助我们了解数据告诉我们的方式。 当我们使用合适的图表来可视化数据并从中获得洞察力时,这将更有意义且更合适。

    In this article, we will go through the common chart types and get to know about their applications scenarios. So by this, we can use appropriate chart types that will be helpful in getting characteristics of the data. To get an introduction about data visualisation in detail you can refer to the article- What and Why of Data Visualisation?

    在本文中,我们将介绍常见的图表类型,并了解它们的应用场景。 因此,通过这种方式,我们可以使用适当的图表类型,这将有助于获取数据的特征。 要获得有关数据可视化的详细介绍,您可以参考文章- 什么和为什么进行数据可视化?

    Now, let us see the different chart types one by one.

    现在,让我们一一查看不同的图表类型。

    1.折线图 (1. Line Chart)

    Line chart or graph is used to illustrate trends in data over a time span or continuous time interval. The line chart tends to reflect different things as they change over time by connecting different plotted points.

    折线图或曲线图用于说明一段时间或连续时间间隔内数据的趋势。 折线图往往会通过连接不同的绘制点来反映随着时间变化的不同事物。

    Multiple trends can also be displayed by plotting lines of different colours. It is advisable not to exceed 5 lines on the same graph for the clarity.

    通过绘制不同颜色的线也可以显示多个趋势。 为了清楚起见,建议不要在同一图形上超过5条线。

    For e.g. the scenarios where we can use the line chart are monthly rainfall, annual sales of a company, month over month trends of stock prices, portal users, etc.

    例如,我们可以使用折线图的场景是每月降雨量,公司的年销售额,股票价格逐月趋势,门户网站用户等。

    Image for post
    Line Chart
    折线图

    2.柱形图 (2. Column Chart)

    Column charts are the most basic charts which use columns to show the numerical values between categories. A column chart includes data labels along the horizontal axis with metrics or values along the vertical axis. It takes advantage of the height of the column to tell the difference in the values and the human eye is quite sensitive to the difference in heights.

    柱形图是最基本的图表,它们使用柱形显示类别之间的数值。 柱形图包括沿水平轴的数据标签,以及沿垂直轴的度量或值。 它利用列的高度来区分值的差异,而人眼对高度的差异非常敏感。

    Column charts can also be used for the comparison between different types of categories. Clustered and Stacked column charts can be used for it.

    柱形图也可用于不同类型类别之间的比较。 可以使用群集和堆积柱形图。

    Some of the scenarios where column charts can be used are — sales by different region, product category, comparison of classified data.

    可以使用柱形图的一些方案是-按不同区域的销售额,产品类别,分类数据的比较。

    Image for post
    Column Chart
    柱形图

    3.条形图 (3. Bar Chart)

    Bar charts are similar in use as column charts only the positions of its two axes are changes. Bar charts are generally used when there are a relatively large number of categories or they can be useful while displaying negative values.

    条形图的用法与柱形图相似,只是条形图的两个轴的位置发生了变化。 条形图通常在类别相对较多时使用,或者在显示负值时很有用。

    Bar charts can also be stacked or clustered while comparing different types of categories. The scenarios where bar charts are used are the same as column charts.

    比较不同类型的类别时,也可以堆叠或群集条形图。 使用条形图的情况与柱形图相同。

    Image for post
    Bar Chart
    条形图

    4.饼图 (4. Pie Chart)

    Pie charts are used to represent the proportions of different classifications in various fields. They are very useful in knowing how much portion of something is of a whole. But we should limit the numbers of classifications as the number of slices increases the chart become unhandy and we are not able to recognise the proportion of each slice as size distinction is not obvious.

    饼图用于表示各个领域中不同类别的比例。 它们对于了解某物有多少是整体非常有用。 但是,随着切片数量的增加,我们应该限制分类的数量,图表变得不便,并且由于大小差异不明显,我们无法识别每个切片的比例。

    There is a multi-layer pie chart also, which shows the proportion of different categorical data and also reflects the hierarchical relationships through it.

    还有一个多层饼图,它显示了不同类别数据的比例,并通过它反映了层次关系。

    The scenarios in which pie charts can be used are such as the comparison between population segments, budget allocations, the male-female ratio, online traffic sources, etc.

    可以使用饼图的场景包括人口细分之间的比较,预算分配,男女比例,在线流量来源等。

    Image for post
    Pie Chart
    饼形图

    5.面积图 (5. Area Chart)

    Area chart represents the change in data(quantities) over time same as of the line chart. It is formed on the basis of the line chart in which the are between the trend-line and axis is filled with colour. As filling with colours better highlights the trend information.

    面积图表示与折线图相同的数据(量)随时间的变化。 它是根据折线图形成的,在折线图中,趋势线和轴之间的颜色填充有颜色。 随着颜色的填充更好地突出了趋势信息。

    The fill should be somewhat transparent or different so that the user can easily observe the overlapping relationship between different trends. Area charts can be used to depict time-series relationship, part-to-whole analysis, a simple comparison between the trend of each category, etc.

    填充应该是透明的或不同的,以便用户可以轻松观察不同趋势之间的重叠关系。 面积图可用于描述时间序列关系,零件到整体分析,每个类别的趋势之间的简单比较等。

    Image for post
    Area Chart
    面积图

    6.散点图 (6. Scatter Chart)

    Scatter plot is used to identify two relationships between two measures(quantities). In this, the two variables are plotted in the form of points on the points on the rectangular coordinate system. The relationship we identify between two variables is a correlation.

    散点图用于识别两个度量(数量)之间的两个关系。 在此,两个变量以点的形式绘制在直角坐标系上的点上。 我们确定的两个变量之间的关系是相关性。

    Scatter plot is used mainly to identify how well we can infer the vertical values from the horizontal axis values. For scatter plot we need a lot of data otherwise we can’t assure that the identified relationship is obvious or not.

    散点图主要用于识别从水平轴值推断垂直值的能力。 对于散点图,我们需要大量数据,否则我们无法确保所识别的关系是显而易见的。

    Image for post
    Scatter Chart
    散点图

    7.气泡图 (7. Bubble Chart)

    A bubble chart is the variant of the scatter plot. It is a multivariate chart that displays three-dimensional data. In the bubble chart, the x & y-axes are used to express two dimensions or measures and the size of the bubble determines the third value. The bubbles can be classified into different categories by using different colours.

    气泡图是散点图的变体。 它是显示三维数据的多元图表。 在气泡图中,x和y轴用于表示两个维度或度量,气泡的大小决定了第三个值。 可以使用不同的颜色将气泡分为不同的类别。

    Bubble charts are mainly used to compare and show the correlations between classified circles using positions and proportions.

    气泡图主要用于比较和显示使用位置和比例分类的圆之间的相关性。

    Image for post
    Bubble Chart
    气泡图

    8.量规表 (8. Gauge Chart)

    Gauge Chart is used to display the progressive values. The scale represents a metric, in which the pointer angle represents the value of a dimension represented by the pointer.

    仪表图用于显示渐进值。 标度表示度量,其中指针角度表示由指针表示的尺寸的值。

    The gauge can be in the form of a ring, half ring or a tube bar, indicating the progress. The scenarios where gauge can be used are for comparison between intervals, achieved value versus targeted value.

    量规可以是环,半环或管棒的形式,以指示进度。 可以使用量规的场景用于时间间隔,实现值与目标值之间的比较。

    Image for post
    Gauge Chart
    量规图

    9. TreeMap (9. TreeMap)

    A TreeMap is used to represent the hierarchical structure of the data in a space-efficient way. The visualisation is created using the method of nested rectangles and displaying the quantities via area for each category. We can drill down within a treemap to an unlimited number of levels.

    TreeMap用于以节省空间的方式表示数据的层次结构。 可视化是使用嵌套矩形的方法创建的,并通过面积显示每个类别的数量。 我们可以在树状图中向下钻取到无限数量的级别。

    TreeMaps can be used when data needs to be studied with respect to two metric values, having a large amount of hierarchical data, to get a high-level view of similarities and differences within one category or between multiple categories.

    当需要针对具有大量分层数据的两个度量值来研究数据时,可以使用TreeMaps来获得一个类别内或多个类别之间的相似点和不同点的高级视图。

    Image for post
    TreeMap
    树状图

    10.漏斗图 (10. Funnel Chart)

    A funnel chart is a type of area chart which helps in visualising the progressive reduction of data from one phase to another amounting 100 per cent in total. The size of the area is determined by the series of value as a percentage of the total of all values.

    漏斗图是一种面积图,有助于直观显示数据从一个阶段到另一个阶段的逐步减少,总计总计100%。 区域的大小由一系列值(占所有值的总和)确定。

    Funnel charts are suitable for comparing rankings. They can be used in visualising the sales conversion data, in analyzing data and managing order and sales cycles, evaluation of a particular process, and in standard value comparison.

    漏斗图适用于比较排名。 它们可用于可视化销售转换数据,分析数据以及管理订单和销售周期,评估特定流程以及进行标准值比较。

    Image for post
    Funnel Chart
    漏斗图

    11.瀑布图 (11. Waterfall Chart)

    A waterfall chart is a modified type of column chart. A waterfall chart helps in understanding the cumulative effect on the initial value which is increased or decreased by a series of intermediate values leading to s final value.

    瀑布图是柱形图的一种修改类型。 瀑布图有助于理解对初始值的累积影响,该初始值通过一系列导致最终值的中间值增加或减少。

    In the waterfall chart, the first column usually represents the initial value to total value, the last column represents the total value and the intermediate columns appear to float, and represent the negative or positive changes from one period of time to another.

    在瀑布图中,第一列通常代表初始值到总值,最后一列代表总值,中间列似乎是浮动的,代表从一个时间段到另一个时间段的负或正变化。

    Waterfall charts are most widely used in the Finance sector to show net value transition, profit variation from the start of a year till the end, and it is also effective to use when to display gradual changes in the value measures over a period of time.

    瀑布图是金融领域中使用最广泛的图表,用于显示净值转换,从年初到年底的利润变化,并且在显示一段时间内价值度量的逐渐变化时也很有效。

    Image for post
    Waterfall Chart
    瀑布图

    12.地图 (12. Map Chart)

    Map Charts are the visualisation which helps us to position our data in the geographical context to get the intuition about the regional distribution on the different levels such as world, countries, states, etc. We can show data on maps in different ways such as point map, flow map and heat map.

    地图图是一种可视化视图,可帮助我们在地理环境中定位数据,以直观了解世界,国家,州等不同层次上的区域分布。我们可以以不同方式(例如点)在地图上显示数据图,流图和热图。

    1. Point Map

    1.点地图

    A Point map uses the method of plotting points on a geographical layer or map. The distribution in the form of points makes it easy to grasp the overall distribution of data. We can also use bubbles instead of points which have different colours and sizes based on values and categories.

    点地图使用在地理图层或地图上绘制点的方法。 点形式的分布可以轻松掌握数据的整体分布。 我们还可以使用气泡代替根据值和类别具有不同颜色和大小的点。

    Image for post
    Point Map
    点地图

    2. Flow Map

    2.流程图

    A Flow map allows the interaction between the outflow and inflow area. It is usually represented by the line connecting the geometric centres of the location. The direction of the line specifies the direction of flow. The width or colour of the line indicates the flow value. Flow Maps can be used to display the imports, exports, geographic migrations etc.

    流图允许流出和流入区域之间的相互作用。 它通常由连接位置的几何中心的线表示。 线的方向指定流动的方向。 线条的宽度或颜色表示流量值。 流图可用于显示导入,导出,地理迁移等。

    Image for post
    Flow Map
    流图

    3. Heat Map

    3.热图

    A Heat Map uses the colour gradients range from light to dark based on the different values which are completely in the specified region. Heat Map can be used in specifying the temperature distribution, population density, etc.

    热图根据完全在指定区域中的不同值使用从浅到深的颜色渐变范围。 热图可用于指定温度分布,人口密度等。

    Image for post
    Heat Map
    热图

    Conclusion

    结论

    All of the above 12 charts are the most frequently used charts in data visualisation. You can create these visualisations on various tools like Power BI, Tableau, Microsoft Excel, etc. These are the basic charts but most of the complex charts are derived from these charts. However, as simple the chart is, the easy it is to understand and get the right insight from data. So, keep this in mind, and try to get a grip over these common charts.

    以上所有12个图表都是数据可视化中最常用的图表。 您可以在各种工具(例如Power BI,Tableau,Microsoft Excel等)上创建这些可视化效果。这些是基本图表,但是大多数复杂图表均来自这些图表。 但是,图表非常简单,很容易理解并从数据中获得正确的见解。 因此,请记住这一点,并尝试掌握这些常见图表。

    翻译自: https://medium.com/vlearn-together/12-most-common-types-of-charts-in-data-visualisation-36021bd2fef5

    数据可视化图表类型

    展开全文
  • 公司销售数据可视化图表.rar
  • Axure数据可视化图表组件.zip
  • 可视化图表库D3.js

    2016-01-14 18:06:26
    D3是目前最流行的JavaScript可视化图表库之一,D3的图表类型非常丰富,并且支持SVG格式,因此应用十分广泛,也有很多图表插件基于D3开发,比如MetricsGraphics.js,在D3上构建的数据图表非常强大。 D3的特点 允许...
  • 数据可视化图表(内含18种图表及其变形)
  • Axure数据可视化图表组件库(AxureUX整理)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,316
精华内容 32,126
关键字:

如何做可视化图表