事实上,“显示板设计” 应用有很多设计元素,但在前面设计PRO显示板和大屏显示板的例子中,只用了少数几个设计元素。

要想把显示板设计工具用好,还需要把每个设计元素的使用都吃透,这就需要去自己去摸索和学习。

MixIOT “显示板设计” 应用中所提供的元素,都是最基本的元素,但也足以满足绝大多数的显示板设计需求。这些元素还在不断完善和丰富,尤其是数据分析类的设计元素,MixIOT 会通过平台升级迭代逐步补充更多的内容。

(一)卡片

卡片元素就有四种,每一种卡片的展现方式,用途都不一样,它们分别是:

  1. 基础卡片
    基础卡片是一种通用的卡片,可以显示任何需要显示的数字。

  2. 事件卡片
    时间卡片多用于显示某种特定的事件相关的信息,比如,事件开始的时间。

  3. 数值卡片
    数值卡片多用于针对某种特定重要的数值,比如,设备累计运算时间,等等。

  4. 历程卡片
    历程卡片主要用于显示历程的开始和结束时间,以及历程当前的持续状态。

每个卡片下面的对应内容,就是相关的设计元素属性设置。不同卡片元素所需要的属性设置项是不完全相同的。

无论设计元素有多少个属性设置项,我们最主要的是关注的就是三方面:

  • 设计元素的外观形状,数据显示的位置等等;
  • 设计元素的基本属性设置;
  • 设计元素的参数设置,主要是数据源的设置。

其中最关键的,就是数据源。我们需要要注意的是,有些设计元素可以有多个变量数据,而有些设计元素只能有一个变量数据。

卡片设计元素的属性设置,我们就不在这里详细描述,可以参考《Mixiot 显示板设计详解》 文稿,或参加智物联组织的显示板设计培训。

(二)曲线图

曲线图是应用最广泛的元素之一。曲线图元素也有四种,分别是:

  1. 基础曲线图
    基础曲线图是一种通用的曲线图,可以用折线方式或平滑曲线方式,显示任何对象的任何变量的值。

  2. 指数曲线图
    指数曲线图是一种显示标线的曲线图,且可以设定标线区段的不同数据颜色。

    在 MixIOT 系统中,通常会构造许多指数,比如,用来衡量空压机运行效率的汽电比指数;用于表示锅炉能耗的能效指数,等等。这些指数都可以用指数曲线图来展现,通过设定标线,对指数所反映的实际情况有非常直观的呈现。

  3. 双X轴曲线图
    双X轴曲线图,也称为双坐标轴曲线图或双X轴图,是一种特殊的图表,它在同一个图表中使用两个X轴来展示两组不同的数据,通常用在以下场合:

  • 时间序列对比:当需要比较两个不同时间序列的数据时,比如两个国家的经济增长率或两个公司的销售额。

  • 不同度量单位:当两组数据使用不同的度量单位,比如一组数据用美元,另一组数据用欧元,双X轴可以清晰地展示它们的变化趋势。

  • 不同数据范围:当两组数据的数值范围相差很大时,使用双X轴可以避免一个数据集的波动被另一个数据集的高值所掩盖。

  • 相关性分析:当需要展示两组数据之间的相关性或对比它们的变化趋势时,比如股票价格和交易量。

  • 多变量分析:在研究中,当需要同时分析多个变量对结果的影响时,双X轴可以帮助展示不同变量之间的关系。

  • 比较:在产品比较分析中,展示不同产品在不同属性上的表现,比如性能、价格、用户满意度等。

    需要注意的是,这种图表可能会给用户带来一定的理解难度,因为它要求读者同时关注两个不同的X轴。因此,在设计时应该确保图表清晰、易于理解,并且适当地标注每个轴所代表的数据。

  1. 区间曲线图
    区间曲线图可以调节变量区间,让所显示的数据都是在所选择区间之内。

基础曲线图/指数曲线图

双X轴曲线图/区间曲线图

曲线图设计元素的属性设置,我们就不在这里详细描述,可以参考《Mixiot 显示板设计详解》 文稿,或参加智物联组织的显示板设计培训。

(三)仪表盘

仪表盘元素只有一种:

仪表盘元素是一个非常形象和直观的显示板设计元素,通常用来显示一些仪表取值的数据,如,速度、温度、压力,等等。

仪表盘设计元素支持仪表盘的多区段标识,也就是把数值分成多区段,用不同颜色来区分:

这种方式可以大大增加了仪表盘的表现力。

(四)柱状图

柱状图是一种常用的数据可视化工具,它通过水平或垂直的柱子来表示数据的大小,其特定是:

  • 直观性:柱状图通过柱子的高度或长度直观地展示数据的大小,使得数据比较一目了然。
  • 比较性:柱状图非常适合用来比较不同类别或组之间的数值差异。
  • 易于理解:即使是非专业人士也能快速理解柱状图中的数据信息。

柱状图元素有两种,横向和竖向的条形图:

(五)表格

表格类型的元素有三种,分别是:“列表”、“表格”,和 “数据”。

列表/表格

数据

这三种设计元素,都是把相对较多的数据集合同时展现。

(六)地图

地图元素有两种,分别是地图和轨迹图:

需要注意的是,地图和轨迹图的使用,都有相关的使用限制。具体的使用限制,则需要向地图服务提供商(如百度、高德)做相关的查询和了解。

(七)饼状图

饼状图只有一种,但可以设置饼状图是否为环型:

饼状图是一种圆形图表,通过将圆分成多个扇区来表示数据的比例关系。每个扇区的角度大小与其所代表的数据量成比例。饼状图的应用场合是份额展现,也就是展示不同部分在整体中的占有率。

饼状图的优点是直观易懂,能够快速展示各部分相对于整体的比例。然而,它也有一些局限性,比如当扇区数量过多时,每个扇区会变得很小,难以区分和比较。此外,饼状图不适合展示具体的数值或变化趋势。

所以,我们在选择使用饼状图时,应考虑数据的特性和展示的目的,以确保图表的有效性和准确性。

(八)雷达图

雷达图,又称为蜘蛛网图或星形图,是一种多变量数据可视化工具,能够展示多个定量变量的相对大小。雷达图通过从中心点向外延伸的轴来表示不同的变量,每个轴的长度代表变量的量值。使用雷达图的主要场合就是多个维度上评估和比较的场景。

雷达图的优点是能够同时展示多个变量,帮助观察者快速识别数据中的模式和异常。然而,雷达图在变量数量较多或数据差异较大时可能会变得复杂,难以解读。此外,雷达图不适合展示时间序列数据或需要精确数值比较的情况。在使用雷达图时,应确保变量的选择和数据的呈现方式能够清晰地传达信息。

(九)桑基图

桑基图(Sankey Diagram)是一种特殊的流图,用于任何需要展示资源、信息或实体流动和转化的场景,比如,物料、能量或成本等的流动和转化过程。它通过不同宽度的箭头来表示不同大小的流量,箭头的宽度与流量成正比。

桑基图的使用场合包括:

  • 能源流:展示不同能源形式的输入、转换和输出过程。
  • 物料平衡:展示原材料的投入、中间产品和最终产品的转换过程。
  • 环境影响:展示污染物的产生、处理和排放过程,以及不同环境介质(如空气、水、土壤)的污染物流动。
  • 信息流:在组织或网络中,展示信息的传递和处理过程。
  • 流量:展示入口、出口流量之间的跳转关系。

桑基图的优点是能够清晰地展示流动和转化的过程,帮助观察者理解复杂的系统和网络。然而,桑基图在处理大量数据或复杂的流动路径时可能会变得拥挤和难以解读。在使用桑基图时,应确保数据的准确性和图表的清晰性,以便有效地传达信息。

(十)开关控件

开关控件,是展示当前某开关变量的开关状态,或者可以直接操作,改变该变量当前开关状态的设计元素。

开关控件的设置可以直接对应某个控制码。

(十一)参数控件

参数控件用来展现某个变量(参数)当前值,并允许修改该变量(参数)数值的设计元素。

参数控件的设置也可以直接对应某个控制码。

(十二)数据分析

Mixiot 数据分析相关的设计元素,暂时只选择了一个,曲线外观上类似指数曲线图。这个数据分析设计元素,可以显示 Mixiot Indass 不同分析项目的分析结果,我们只需要在分析类型中选择即可。

Mixiot 数据分析的结果有两类,一个是计算指数,另一个是估计值。如果能把数据分析设计元素使用好,则一定会给我们带来非常重要的作用。比如,通过风险分析曲线,我们可以很直观看到对象的风险估计值的变化。

(十三)组态图

组态图多用于设备(对象)运行实时监控。

组态图设计元素由两部分组成,即 “底图”(或者“背景图”)和 “组态参数”。组态图元素支持多底图,以及动画格式,可以通过变量值条件,决定多底图的选择。

组态参数展现的样式目前支持的有:参数卡片、液位、信号灯、文本、数值,以及状态。组态参数的样式未来还会根据实际需要增加。

(十四)视频

视频元素是一个流媒体播器放元素:

MixIOT 默认支持 “萤石云” 平台的系列摄像头,我们只需要填写获取该摄像头流媒体的地址即可。

文档更新时间: 2024-07-10 20:35   作者:Mixiot