zoukankan      html  css  js  c++  java
  • 网易有数的搭积木原则阐述

    网易有数给用户提供了非常灵活的制作图表能力,让用户能搭积木。在产品、交互、技术层面,都试图用统一的逻辑和语言告诉用户,有哪些积木,搭积木的基本原则是怎样的。当用户掌握了四个搭积木的原则后,就能自由的运用有数,制作出精美的图表。

    有哪些积木?

    我们提供了条形、折线、区域、散点、饼图、甘特图、文本、填充地图8种积木。虽然只有8块积木,但我们能实现非常多的图表类型(无法穷尽),基本的条形图、折线图、饼图、散点图、表格图、卡片图、标记地图、填充地图,还能扩展到条形折线组合图、子弹图、热力图、堆积条形点线图、漏斗图……

    拿几张同事们做的图表举例子(屏幕像素有些渣……)

     

    一张图表制作的元素,网易有数的名词解释

    *行列面板,决定透视图表结构。

    *多Marks面板,2个以上的面板称为多Marks面板。一个度量对应一个面板,(XY轴都有度量,则是一组度量对应一个面板)。每个面板都可以进行属性设置。

    *属性面板,又称为Mark面板,对Mark的属性进行修改,Mark的属性是由数据决定,颜色、大小都是有数据意义的。

     

    搭积木的原则

    搭积木原则一:行列面板决定了透视图表结构

    网易有数通过在行列面板上放置字段,决定了透视图表的结构,不同的位置有不同的图表展现形式。

    行列面板包含了两层:

    第一层:X轴和Y轴组成的图表。

    度量所在的轴,为度量轴。与度量轴相对的轴是维度轴。

    度量轴上放置一个度量字段,维度轴上放置一个维度字段,就可以组成一张简单的图表。

    没有XY轴的图表,通过属性面板就绘制出了图表,比如饼图。

    第二层:透视维度的列维度、透视维度的行维度

    组成了基本的图表后,其他的维度都是透视维度。会根据维度是放在X轴,还是Y轴,对数据进行透视划分。透视维度在X轴,则字段成员如同X轴的刻度名称,显示在X轴。透视维度在Y轴,则字段成员如同Y轴的刻度名称,显示在Y轴。

     

    搭积木原则二:多Marks面板

    多Marks面板,让有数为用户提供了多种图表的扩展能力。

    每一个属性面板,都可以独立进行设置。

     

    用户有时也会需要在一个面板里显示多个度量。这个时候就需要用到两个特殊的字段。度量名称和度量值。

    度量名称,可以视为是一个维度。度量名称的成员是包含在行列面板和属性面板出现的度量。

    在应用度量名称时,可以只出现度量名称。比如下例:用度量名称当颜色图例,此时度量名称的成员是[销售额]和[数量],销售额折线和数量折线拥有不同的颜色。

    度量值,可以视为是一个度量。这个度量代表的是一组度量集合,对应的是一个Mark面板。

    具体的,度量值包含的成员是度量列表里勾选的度量。如果只出现度量值,将在这个数据位置重叠出现所勾选的度量。

    度量值需要和度量名称一起出现,此时就是度量值就被度量名称细分,每一个度量对应自己的名称和值。

    搭积木原则三:属性面板

    对Mark的属性进行修改。Mark的属性是由数据决定,颜色、大小都是有数据意义的。

    当属性面板上放置了维度,则是该单元的数据进行细分。如果是放置在颜色,则赋予该维度为颜色图例。如果是放置在形状,则赋予该维度为形状图例。

    当属性面板上放置了度量,则是对该Mark的大小、颜色赋予数值上的意义。

    搭积木原则四:文本标记绘制透视表格

    网易有数实现透视表的方式,是将值视作Abc标记。X轴的最后一个维度,是对应X轴的刻度,但这里的X轴是放置在上方的。Y轴的最后一个维度,是对应Y轴的刻度。如果再在行列面板上增加维度,则是相对应的透视维度。

    文中所有示例均是在网易有数中实现,欢迎使用体验~

    了解 网易云 :
    网易云官网:https://www.163yun.com/
    新用户大礼包:https://www.163yun.com/gift
    网易云社区:https://sq.163yun.com/

    本文已由作者文雯授权网易云社区发布,原文链接:网易有数的搭积木原则阐述

  • 相关阅读:
    Codeforces Round #344 (Div. 2) C. Report 其他
    Codeforces Round #344 (Div. 2) B. Print Check 水题
    Codeforces Round #344 (Div. 2) A. Interview 水题
    8VC Venture Cup 2016
    CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂 中二版
    CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂
    CDOJ 1279 班委选举 每周一题 div2 暴力
    每周算法讲堂 快速幂
    8VC Venture Cup 2016
    Educational Codeforces Round 9 F. Magic Matrix 最小生成树
  • 原文地址:https://www.cnblogs.com/163yun/p/9228731.html
Copyright © 2011-2022 走看看