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/

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

  • 相关阅读:
    System V 消息队列
    《APUE》读书笔记第十五章进程间通信
    感冒休息
    《APUE》读书笔记—第十一章线程
    消息队列和管道的区别(转载)
    《APUE》读书笔记第十八章终端I/O
    《APUE》读书笔记第十九章伪终端
    《APUE》读书笔记第十六章网络IPC:套接字
    [转]阿里要走102年,阿里的工程师能走多远呢?
    Posix消息队列
  • 原文地址:https://www.cnblogs.com/163yun/p/9228731.html
Copyright © 2011-2022 走看看