CN105144243A - 数据可视化 - Google Patents

Abstract

本文所述的主题的各方面涉及数据可视化。在各方面中，调用程序发出绘制一组形状的请求，该组形状具有在这些形状之间公共的形状类型。所述请求可以是用于静态绘制或N个动画帧之一。如果设备具有可用的图形处理单元(GPU)，则为GPU生成GPU代码以绘制该组形状。否则，生成CPU代码来绘制该组形状。为了增强性能，绘制代码针对调用函数指定的恒定的、数据映射的以及动画化的属性值来定制，且省略测试在绘制形状之前可被计算的值的条件语句。

Description

数据可视化

背景

将数据可视化正变得越来越重要。各种组织通常具有由其支配的大量数据集，但是它们缺乏对数据进行可视化的有意义的方式。对于小数据集而言创建简单的条形图可能是相对容易的，但是随着数据集大小增加以及数据集内数据的特征变化，创建允许某人快速且有效地将数据可视化的框架的任务变得令人生畏。

此处要求保护的主题不限于解决任何缺点或仅在诸如上述环境这样的环境中操作的各实施例。相反，提供该背景仅用于例示其中可实现所述一些实施例的一个示例性技术领域。

概述

简单来说，本文所述的主题的各方面涉及同步可视化。在各方面中，调用程序发出绘制一组形状的请求，该组形状具有在这些形状之间公共的形状类型。所述请求可以是用于静态绘制或N个动画帧之一。如果设备具有可用的图形处理单元(GPU)，则为GPU生成GPU代码以绘制该组形状。否则，生成CPU代码来绘制该组形状。为了增强性能，绘制代码针对调用函数指定的恒定的、数据映射的以及动画化的属性值来定制，且省略测试在绘制形状之前可被计算的值的条件语句。

提供本概述是为了简要地标识在以下详细描述中进一步描述的主题的一些方面。本概述并不旨在标识出所要求保护的主题的关键特征或必要特征，也不旨在用于限制所要求保护的主题的范围。

除非上下文清楚地指出，否则短语“本文所描述的主题”指的是具体实施方式中描述的主题。术语“方面”应被当作“至少一个方面”。标识具体实施方式中所描述的主题的各方面不旨在标识所要求保护的主题的关键特征或必要特征。

上述各方面和此处所描述的主题的其它方面是借助于示例说明的，并且不受附图限制，附图中相同的标号指示相似的元素。

附图简述

图1是表示其中可结合本文所描述的主题的各方面的示例性通用计算环境的框图；

图2是一般地表示根据本文所述的主题的各方面的示例性组件的框图；

图3一般地表示根据本文所述的主题的各方面的一些示例性数据结构、示例性枚举、以及示例性接口；

图4-14是一般地表示根据本文所述的主题的各方面可能发生的示例性动作的流程图；以及

图15是一般地表示根据本文所述的主题的各方面的、从批绘制引擎的调用程序的角度可能发生的动作的流程图。

详细描述

定义

如本文所使用的，术语“包括”及其变体要被当作开放式术语，表示“包括但不限于”。除非上下文另外清楚地指示出，否则术语“或”要被当作“和/或”。术语“基于”要被当作“至少部分地基于”。术语“一个实施例”和“一实施例”要被当作“至少一个实施例”。术语“另一实施例”要被当作“至少一个其他实施例”。

如本文所使用的，诸如“一”和“该”等术语包括了一个或多个所指示的项或动作。具体而言，在权利要求书中，对某一项的引用一般表示存在至少一个这样的项，并且对一动作的引用表示执行该动作的至少一个实例。

本文中有时可使用术语“第一”、“第二”、“第三”等等。在没有附加上下文的情况下，权利要求中对这些术语的使用不意在暗示排序，而是用于标识的目的。例如，短语“第一版本”和“第二版本”不一定意味着第一版本是真正的第一个版本或是在第二版本之前创建的，或甚至是第一版本是在第二版本之前被请求或操作的。相反，这些措辞用来标识不同的版本。上述的一个例外是术语“第一帧”被用于权利要求中的情况。

标题仅是为了方便；关于给定话题的信息可在其标题指示该话题的章节之外被寻找到。

其他显式或隐式的定义可被包括在下文中。

示例性操作环境

图1例示出可在其上实现本文所述的主题的各方面的合适的计算系统环境100的示例。计算系统环境100仅为合适的计算环境的一个示例，并非旨在对本文所述的主题的各方面的使用范围或功能提出任何限制。也不应该将计算环境100解释为对示例性操作环境100中示出的任一组件或其组合有任何依赖性或要求。

本文所描述的主题的各方面可与众多其他通用或专用计算系统环境或配置一起操作。可适用于本文所述的主题的各方面的已知计算系统、环境或配置的示例包括个人计算机、服务器计算机(无论是在裸机上还是作为虚拟机)、手持式或膝上型设备、多处理器系统、基于微控制器的系统、机顶盒、可编程和不可编程消费电子设备、网络PC、小型计算机、大型计算机、个人数字助理(PDA)、游戏设备、打印机、包括机顶盒、媒体中心或其它电器的家电设备、嵌入汽车或附连到汽车的计算设备、其他移动设备、包括蜂窝电话、无线电话和有线电话的电话设备、包括任何上述系统或设备的分布式计算环境等等。

本文所述的主题的各方面可在由计算机执行的诸如程序模块等计算机可执行指令的一般上下文中描述。一般而言，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等。本文所述的主题的各方面也可以在其中任务由通过通信网络链接的远程处理设备执行的分布式计算环境中实现。在分布式计算环境中，程序模块可以位于包括存储器存储设备的本地和远程计算机存储介质中。

作为替代或补充，本文所述的功能可至少部分地由一个或多个硬件逻辑组件来执行。例如且并非限制，可使用的硬件逻辑组件的说明性类型包括现场可编程门阵列(FPGA)、程序专用集成电路(ASIC)、程序专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑器件(CPLD)等等。

参考图1，用于实现本文所述的主题的各方面的示例性系统包括计算机110形式的通用计算设备。计算机可包括能够执行指令的任何电子设备。计算机110的组件可包括处理单元120(其可包括中央处理单元，以及在某些系统中的图形处理单元)、系统存储器130、以及将包括所述系统存储器在内的各种系统组件耦合至所述处理单元120的一个或多个系统总线(由系统总线121所代表)。当存在时，图形处理单元可被包括在主板上、图形接口卡上、处理单元120内，或采用其他方式。

系统总线121可以是若干类型的总线结构中的任一种，包括存储器总线或存储器控制器、外围总线和使用各种总线体系结构中的任一种的局部总线。作为示例，而非限制，这样的架构包括工业标准架构(ISA)总线、微通道架构(MCA)总线、增强型ISA(EISA)总线、视频电子技术标准协会(VESA)局部总线、也称为夹层(Mezzanine)总线的外围部件互连(PCI)总线、扩展外围部件互连(PCI-X)总线、高级图形端口(AGP)、以及PCIExpress(PCIe)。

处理单元120可以连接到硬件安全设备122。安全设备122可以存储并能够生成密钥，所述密钥可用于保护计算机110的各个方面。在一个实施例中，安全设备122可以包括可信平台模块(TPM)芯片、TPM安全设备等等。

计算机110通常包括各种计算机可读介质。计算机可读介质可以是能由计算机110访问的任何可用介质，并包含易失性和非易失性介质以及可移动和不可移动介质两者。作为示例而非限制，计算机可读介质可包括计算机存储介质和通信介质。

计算机存储介质包括以用于存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息的任何方法或技术来实现的易失性和非易失性、可移动和不可移动介质。计算机存储介质包括：RAM、ROM、EEPROM、固态存储、闪存或其它存储器技术、CD-ROM、数字多功能盘(DVD)或其它光盘存储、磁盒、磁带、磁盘存储或其它磁存储设备、或可以用来储存所期望的信息并可由计算机110访问的任意其它介质。计算机存储介质不包括通信介质。

通信介质通常以诸如载波或其他传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其他数据，并包括任何信息传送介质。术语“已调制数据信号”是指使得以在信号中编码信息的方式来设置或改变其一个或多个特性的信号。作为示例而非限制，通信介质包括有线介质，诸如有线网络或直接线连接，以及无线介质，诸如声学、RF、红外线和其他无线介质。上述的任意组合也应包含在计算机可读介质的范围内。

系统存储器130包括易失性和/或非易失性存储器形式的计算机存储介质，如只读存储器(ROM)131和随机存取存储器(RAM)132。包含诸如在启动期间帮助在计算机110内的元件之间传输信息的基本例程的基本输入/输出系统133(BIOS)通常存储在ROM131中。RAM132通常包含处理单元120可立即访问和/或当前正在操作的数据和/或程序模块。作为示例而非限制，图1例示出了操作系统134、应用程序135、其它程序模块136和程序数据137。

计算机110也可以包括其他可移动/不可移动、易失性/非易失性计算机存储介质。仅作为示例，图1例示出了从不可移动非易失性磁介质中读取或向其写入的硬盘驱动器141，从可移动非易失性磁盘152中读取或向其写入的磁盘驱动器151，以及从诸如CDROM、DVD或其他光学介质等可移动非易失性光盘156中读取或向其写入的光盘驱动器155。可以在该示例性操作环境中使用的其他可移动/不可移动、易失性/非易失性计算机存储介质包括磁带盒、闪存卡和其他固态存储设备、数字多功能盘、其他光盘、数字录像带、固态RAM、固态ROM等等。硬盘驱动器141可通过接口140连接至系统总线121，而磁盘驱动器151和光盘驱动器155可通过诸如接口150之类的用于可移动非易失性存储器的接口连接至系统总线121。

以上讨论并在图1中例示出的驱动器及其相关联的计算机存储介质为计算机110提供了对计算机可读指令、数据结构、程序模块和其他数据的存储。例如，在图1中，硬盘驱动器141被示为存储操作系统144、应用程序145、其他程序模块146和程序数据147。注意，这些组件可与操作系统134、应用程序135、其它程序模块136和程序数据137相同，也可与它们不同。操作系统144、应用程序145、其他程序模块146和程序数据147在这里被标注了不同的附图标记是为了说明至少它们是不同的副本。

用户可以通过输入设备，如键盘162和定点设备161(通常被称为鼠标、跟踪球或触摸垫)向计算机110输入命令和信息。其它输入设备(未示出)可包括话筒(例如用于输入语音或其他音频)、操纵杆、游戏手柄、圆盘式卫星天线、扫描仪、触敏屏、写字板、相机(用于输入姿势或其他视觉输入)等等。这些以及其它输入设备通常通过耦合到系统总线的用户输入接口160连接到处理单元120，但也可通过诸如并行端口、游戏端口或通用串行总线(USB)之类的其它接口和总线结构来连接。

通过使用上文标识的输入设备中的一个或多个，可建立自然用户接口(NUI)。NUI可依赖于语音识别、触摸和指示笔识别、屏幕上和邻近该屏幕两者的姿势识别、空中姿势、头和眼睛跟踪、语音和话音、视觉、触摸、姿势、机器智能等等。可被用来与用户交互的一些示例性NUI技术可包括触敏显示器，话音和语音识别，意图和目的理解，使用深度相机(如立体相机系统、红外相机系统、RGB相机系统、以及这些的组合)的运动姿势检测，使用加速度计/陀螺仪的运动姿势检测，面部识别，3D显示，头部、眼睛和注视跟踪，沉浸式增强现实和虚拟现实系统，以及用于使用电场传感电极(EEG和相关方法)的传感大脑活动的技术。

监视器191或其他类型的显示设备也经由诸如视频接口190之类的接口连接至系统总线121。除了监视器以外，计算机还可包括诸如扬声器197和打印机196之类的其它外围输出设备，它们可通过输出外围接口195来连接。

计算机110可使用到一个或多个远程计算机(诸如，远程计算机180)的逻辑连接而在联网环境中操作。远程计算机180可以是个人计算机、服务器、路由器、网络PC、对等设备或其他常见网络节点，且通常包括上文相对于计算机110描述的许多或所有元件，但在图1中只示出存储器存储设备181。图1中所描绘的逻辑连接包括局域网(LAN)171和广域网(WAN)173，但也可以包括电话网络、近场网络、以及其他网络。这样的联网环境常见于办公室、企业范围计算机网络、内联网和因特网中。

当在LAN联网环境中使用时，计算机110通过网络接口或适配器170连接到LAN171。当在WAN联网环境中使用时，计算机110可包括调制解调器172或用于通过诸如因特网等WAN173来建立通信的其他装置。可为内置或可为外置的调制解调器172可以经由用户输入接口160或其他合适的机构连接至系统总线121。在联网环境中，相关于计算机110所示的程序模块或其部分可被存储在远程存储器存储设备中。作为示例而非限制，图1例示出了远程应用程序185驻留在存储器设备181上。应当理解，所示的网络连接是示例性的，并且可使用在计算机之间建立通信链路的其它手段。

数据可视化

如先前所述，创建允许某人快速且有效地将数据可视化的框架是有挑战性的。图2是一般地表示根据本文所述的主题的各方面的示例性组件的框图。图2中示出的各组件是示例性的且不意味着包括一切的可能需要或包括的组件。此外，在其他实施例中组件的数量可以不同，而不背离本文所述的主题的各方面的精神或范围。在一些实施例中，结合图2描述的组件可被包括在其他组件(示出或未示出)中或者被放置在子组件中，而不背离本文所述的主题的各方面的精神或范围。在一些实施例中，结合图2所描述的组件和/或功能可跨多个设备分布。

如本文所使用的，术语组件要被当作包括硬件，例如，设备的全部或一部分、一个或多个软件模块或其部分的集合、一个或多个软件模块或其部分与一个或多个设备或其部分的某种组合等等。

例如，图2中所例示的组件可使用一个或多个计算设备来实现。这些设备可包括，例如，个人计算机，服务器计算机，手持式或膝上型设备，多处理器系统，基于微控制器的系统，机顶盒，可编程消费电子产品，网络PC，小型计算机，大型计算机，蜂窝电话，个人数字助理(PDA)，游戏设备，打印机，包括机顶盒、媒体中心或其它电器的家电设备、嵌入汽车或附连到汽车的计算设备，其他移动设备，包括任何以上系统或设备的分布式计算环境等。

可被配置成实现图2的组件中的一个或多个组件的示例性设备包括图1的计算机110。

组件还可包括代码或可由代码来表示。代码包括指示计算机要采取的动作的指令。代码还可包括除了计算机要采取的动作之外的信息，如数据、资源、变量、定义、关系、关联等等。

代码可由计算机执行。当代码由计算机执行时，这可被称为进程。在此使用的术语“进程”及其变体可包括一个或多个传统的进程、线程、组件、库、执行任务的对象等等。进程可以用硬件、软件、或硬件和软件的组合来实现。在一实施例中，无论如何命名，进程是能够执行或者用于执行动作的任何机制。进程可分布在多个设备或单个设备上。代码可在用户模式、内核模式、某一其他模式、上述模式的组合等中执行。

图2例示出一些示例性组件，包括图表(Chart)、绘图(Plot)、绘图部件(PlotPart)、数据管理器(DataMgr)、绘图着色器(PlotShader)、属性集(AttributeSet)、绘图服务器(PlotServer)、变化管理器(ChangeMgr)、主题管理器(ThemeMgr)、几何库(GeometryLibrary)、统计库(StatLibrary)、曲线拟合库(CurveFittingLibrary)、以及数据变换库(DataTransformationLibrary)，以及这些组件中许多组件的子组件。

Chart205可包括1至N个图表小面(facet)。图表小面包括图表框架(ChartFrame)和1至N个绘图(1-NPlots)。一小面内的绘图层叠在彼此之上。ChartFrame可包括例如图表的轴、标题、图例、以及网格线。

UI状态管理器(UIStateMgr)负责维护每个形状的交互状态。交互状态可包括例如悬停(hover)、选择(selection)、过滤(filter)等。UIStateMgr可包括变化代理(ChangeAgent)和选择器(Selector)。

ChangeAgent负责与不同图表共享交互状态。Selector便于通过边界(如橡皮筋型边界或其他边界(如圆、正方形、矩形等))来选择形状。选择形状也可通过各种其他交互来进行，包括经自然用户接口(如先前所述)的鼠标、触摸、姿势等。

Plot210是包括1至N个绘图部件(1-NPlotParts)和1至M个数据管理器(1-MDataMgrs)的数据驱动的绘制组件。绘图的示例包括柱状图、折线图、箱线图等。

PlotPart215(有时也称为批上下文)是Plot的逻辑部件。PlotPart215可用单个形状类型及其自己的上下文来被绘制。例如，用于箱线图中的一复杂形状可使用以下四个部件来被绘制：垂直线、框、水平线、以及离群点。PlotPart215可包括容器(Container)、1至n个绘图着色器(1-nPlotShaders)、去往属性集(ToAttributeSet)，以及可包括来自属性集(FromAttributeSet)。对于单帧绘制，来自属性集可被省略。当为动画绘制多帧时，来自属性集和去往属性集都可被提供来执行动画。

Container220(有时称为批画布)可包括CPU绘制(CPUDraw)组件，且还可包括GPU绘制(GPUDraw)组件。在Container220被主控在具有中央处理单元的计算机上时，CPUDraw组件可用。当主控设备还包括图形处理单元时(例如许多图形卡上发现的)，Container220还可包括GPUDraw组件。Container220可使用CPUDraw组件和/或GPUDraw组件，这取决于主控设备上什么可用以及正被绘制的形状。

DataMgr225管理当前数据集的排序和过滤。除了维持原始格式(如JSON)之外，DataMgr225可使用NVF格式(下文中更详细描述)来内部地表示数据。

PlotShader230在绘制部件或绘图时添加绘制功能。例如，PlotShader可包括线着色器、条形图着色器、UI状态着色器、小面着色器等。PlotShader230还可包括执行默认的着色功能的默认绘图着色器。PlotShader230可生成常量以及发出执行各种计算的代码(有时也称为属性缩放代码(attributescalingcode))。代码发出器将PlotShader230生成的代码转换成适合于CPU或GPU的形式，这取决于可用的硬件以及其他条件。着色器可被高速缓存并被重用。

AttributeSet235包括标准属性和自定义属性。一些示例性标准属性包括：x、y、z、大小、宽度、高度、颜色、笔画、不透明度、分组、UI状态(uiState)、图像索引(imageIndex)、小面等。一些自定义属性可包括，例如：随机X(randomX)、随机Y(randomY)、条索引(barIndex)、图像索引(imageIndex)等。自定义属性可由调用程序或绘图着色器来创建。自定义属性可包括着色器需要的用来帮助计算其他属性的值的数据。该数据可通过自定义属性而被传递给着色器。

PlotServer240可运行在服务器上以及提供像读取文件、排序、涉及服务器代码的自定义布局等的服务。PlotServer240还可管理机器到机器变化通知。

虽然此处有时使用术语“客户机”和“服务器”，但应当理解，客户机可在具有通常与服务器相关联的硬件和/或软件的机器上实现，同样，服务器可在具有通常与台式、个人或移动计算机相关联的硬件和/或软件的机器上实现。此外，客户机有时候可以用作服务器，反之亦然。有时候，更频繁地用作客户机或服务器的两个或更多个实体可并发地成为对等体、服务器或客户机。在一实施例中，客户机和服务器可在同一个物理机器上实现。

此外，如此处所使用的，术语“服务器”和“客户机”中的每个可以指一个或多个物理或虚拟实体、在一个或多个物理或虚拟实体上执行的一个或多个进程等。因此，服务器可包括一个或多个进程在其上执行的实际物理节点、一个或多个进程在其上执行的虚拟节点、在一个或多个节点上执行的服务、共同提供服务的一组节点等。服务可包括在一个或多个物理或虚拟实体上执行的一个或多个进程。此外，单个进程可实现一个或多个服务器。

ChangeMgr245可在将图表渲染到输出设备的客户机上执行，以及可管理向订户通知对图表的改变。

ThemeMgr250管理在不同主题之间进行改变。主题定义了PlotPart、ChartFrame等的外观。主题可包括颜色、线宽、字体、其他特征等。

几何库255包括形状类型的几何图形。当被请求形状类型时，几何库255可提供定义该形状的路径的数据(如串)。

统计库260用于分箱以及其他统计功能。统计库260在被给予一数据集时可执行分箱或按所请求的那样执行某种其他统计功能。

曲线拟合库265提供用于拟合曲线的功能。为了使用曲线拟合库265，数据集与要拟合的曲线的阶数(线性、二阶、三阶、或某一其他阶)的指示一起被传递。

数据变换库270提供用于变换数据的功能。例如，数据变换库270可将数据从宽格式变换成长格式。例如，销售数据可用具有4个或更多列的宽格式来表示：年(year)、利润(profit)、销售额(sales)、以及奖金(bonus)。该相同数据可用具有3个值的长格式来表示：年、实例、以及值。例如，宽销售格式的年：1984、利润：500、销售额：300、奖金：100可用长格式表示为：

年：1984、实例：利润、值：500

年：1984、实例：销售额、值：300

年：1984、实例：奖金、值：100。

数据变换库270还可执行数据平滑，其中它进行某种类型的平均或其他平滑功能。数据变换库270还可执行分组和/或其他聚集功能，以及排序变换、过滤、或其他数据库查询变换。

为了绘制一组形状(如某一部件)，可指定以下：

1.形状(Shape)类型；

2.属性(Attribute)设置

3.数据集(DataSet)；以及

4.一组一个或多个绘图着色器。

属性设置可与常数值和列名称映射一样简单，但还可包括缩放(scaling)方法以及自定义比例(scales)。例如，可使用下列来绘制一组形状：SHAPETYPE＝SQUARE,X＝SALES,Y＝PROFIT,COLOR＝BLUE,OPACITY＝.6,SIZE＝25,DATASET＝SalesTable(形状类型＝正方形、X＝销售额、Y＝利润、颜色＝蓝色、不透明度＝0.6、大小＝25、数据集＝SalesTable(销售额表))。

绘制可使用批上下文或通过直接调用批绘制引擎来完成。对于多小面的图表，可通过将“小面”属性设置为定义记录如何被分箱到每个小面的列，某一部件的所有小面可用单个绘制调用来绘制。

数据集是记录的逻辑集合，每个记录包含1至N个命名的列值。绘制引擎可以接受具有各种格式的输入数据集。数据集可用特定形式被内部地存储，用于在访问和映射数据时获得高性能。

JSON是一种用于表示数据的命名结构的格式。JSON是示例性的格式，且被用于说明性的目的。尽管在此有时使用JSON，但是并不意图将数据表示限制为JSON格式。实际上，基于本文教导，本领域技术人员将认识到可表示数据的许多其他格式，而不背离本文所述的主题的各方面的精神或范围。

示例性的数据集可用JSON被定义如下：

varSalesTable＝

[

{city(城市):"LosAngeles(洛杉矶)",sales:34000,profit:12300,bonuses(奖金):3000,year:2001},

{city:"NewYork(纽约)",sales:16500,profit:0,bonuses:0,year:2002},

{city:"Seattle(西雅图)",sales:21000,profit:5200,bonuses:500,year:2003},

{city:"Phoenix(菲尼克斯)",sales:15000,profit:-3800,bonuses:0,year:2004},

{city:"Boston(波士顿)",sales:33700,profit:2500,bonuses:100,year:2005},

{city:"Tampa(坦帕)",sales:5500,profit:1250,bonuses:0,year:2006},

{city:"Orlando(奥兰多)",sales:31000,profit:18000,bonuses:4000,year:2007},

{city:"SanDiego(圣地亚哥)",sales:42500,profit:22000,bonuses:4200,year:2008},

]；

NFV格式是命名向量格式(NamedVectorFormat)的缩写。在一个实现中，NVF格式是批绘制引擎所使用的数据集的内部格式。在该格式中，数据集列值被表示为FLOAT(浮点)或INT(整型)值的向量，带有该列的预先计算的MIN/MAX(最小/最大)值(或MIN/RANGE(最小/范围)值)。使用值索引方案，非数值值被转换成数值。记录与非数值值之间的双向索引可被维持来增强后续数据变换的性能。该格式使得能够对任一列进行快速数据访问，且带有缩放数据而不必对数据进行后续遍历以收集最小/最大值的能力。

形状类型是批绘制引擎所支持的原语绘制类型之一。预定义的形状类型包括例如：square(正方形)、rectangle(矩形)、line(线)、imageShape(图像形状)、image(图像)以及text(文本)。

批上下文管理某一部件的绘制和动画。批上下文是批绘制引擎之上的抽象，并被用于实现预定义的或自定义的绘图。

批绘制引擎是用一公共形状类型绘制一组形状的形状绘制引擎。它具有两个用于绘制的主方法：“CPU绘制”和“GPU绘制”。GPU代表图形处理单元，并在可用时用于更快速地绘制。当GPU不可用时，备用的是“CPU绘制”。在一个实施例中，批绘制引擎使用用于“GPU绘制”的HTML5Canvas3D(画布3D)上下文(WebGL)，以及使用用于“CPU绘制”的Canvas2D(画布2D)来绘制形状。

属性是用于绘制形状类型的逻辑值。每个形状类型定义了它用来绘制其形状的属性的集合。此外，自定义属性可被定义来将额外的数据带入着色器用于与其他属性的计算。某些示例性属性包括：X、Y、COLOR(颜色)、OPACITY(不透明度)、以及SIZE(大小)。属性可被设为恒定值(如Color＝Blue(颜色＝蓝色))，或被映射到数据列(如Color＝Sales(颜色＝销售额))。此外，在形状被绘制时，大多数属性可被动画化(如Color:from＝Blue,to＝Sales(颜色：来自＝蓝色、去往＝销售额))。

着色器是由批绘制引擎生成的在CPU或GPU上运行的形状绘制代码。可对每个属性的特定的恒定的、映射以及动画值，以及对所使用的shapeType(形状类型)来优化所生成的代码。

对于属性值计算，批绘制引擎调用每个绘图着色器来发出代码以计算或调整一个或多个属性的值。

绘图着色器能从多个标准缩放功能(standardscalingfunction)中选择，或发出自定义计算。

图3一般地表示根据本文所述的主题的各方面的一些示例性数据结构、示例性枚举、以及示例性接口。在TypeScript(类型脚本)中，实现示例性数据结构的一个示例性方式如下：

exportenumuiState(UI状态)

{

normal,//0未选择的且无悬停

hover,//1

hoverSelected,//2

selected,//3

filteredOut,//4

}

exportclassshaderContextData(着色器上下文数据)

{

//----由chart(图表)提供----

facetInfo:IFacetInfo；

preventAnimation:bool；

//----由uiStateMgr(UI状态管理器)提供----

isSelectionActive:bool；

isFilterActive:bool；

//如果为真，被过滤的数据被用于当前视图的边界

isFilterBoundsActive；

isHoverActive:bool；

//----由uiStateMgr(UI状态管理器)提供----

didHoverChange:bool；

didSelectionChange:bool；

didFilterChange:bool；

lastUiStateCol:INvfColumn；//来自上一绘制的uiState(UI状态)

//----由part/batchContext(部件/批上下文)提供----

width:number；//plotarea/facet(绘图区域/小面)的宽度

height:number；//plotarea/facet的宽度

isUsingGpu:bool；

shapeType:batchDraw.shapeType；

data:INvfData；//完整的或小面子集

count:number；//数据中的项目数

avgSize:number；//形状的平均/目标大小

//用于正被绘制的当前部件的着色器

shaders:IPlotShader[]；

imgSheet:IShapeSheet；

//调色板中用于第一uiState(UI状态)颜色的索引

uiStateColorIndex:number；

//----由cpuDraw/gpuDraw(CPU绘制/GPU绘制)提供----

//"From(来自)"或""(要被添加到着色器中的属性变量的后缀

ft:string；

//属性名与其当前变量名的映射

locs:any；

//---调试(由constructor(构造函数)提供)----

scdId:number；

constructor()

{

this.scdId＝nextScdId++；

}

}

//由cpuDraw(CPU绘制)和gpuDraw(GPU绘制)使用来快速缩放属性。

//仅数据结构。平坦方法访问它。

exportclassstdScaleData(标准缩放数据)

{

min:number；//FROM(来自)最小值

range:number；//FROM(来自)范围＝最大值-最小值

min2:number；//TO(去往)最小值

range2:number；//TO(去往)范围＝最大值-最小值

//----这些域仅被定义用于cpuDraw(CPU绘制)----

isDiscreet:bool；

//isFlipped:bool；

}

在TypeScript(类型脚本)中，实现示例性枚举的一个示例性方式如下：

exportenumshapeType(形状类型)

{

image,

imageShape,

line,

rectangle,

square,

}

exportenumscalingType(缩放类型)

{

none,

linear,

linearFlip,

linearSize,

category,

categoryCluster,

}

在TypeScript(类型脚本)中，实现示例性接口的一个示例性方式如下：

exportinterfaceIChart

{

parent():HTMLElement；

parent(value:any):IChart；

autoRedraw():bool；

autoRedraw(value:bool):IChart；

chartFrame():frameControls.IChartFrame；

setFacets(data:batchDraw.INvfData,colName:string,binCount:number)；

clearFacets()；

batchContainer():batchDraw.IContainer；

//设置绘制容器的大小(与图表大小相同)。

//setContainerSize(width:number,height:number)；

//设置总图表区域的大小

//(可能包括带状条、状态行、其他装饰)。

//设置总图表的大小(带状条+绘图区域)

setTotalChartSize(width:number,height:number)；

//如果某一HTML元素完全覆盖图表，

//将其设于此处从而图表能进行合适的事件测试。

//setElementThatCoversChart(topMost:HTMLElement)；

erase()；

drawChart(preventAnimation？:bool,isHoverDraw？:bool)；

addLayer(plot:IPlot)；

getLayer(num:number):IPlot；

clearLayers()；

getPlotBounds():ClientRect；

markDrawNeeded()；

uiStateMgr():plotServices.IUIStateMgr；

isChartDrawing():bool；

getDrawCount():number；

//----事件----

attachOnChartDrawingCompleted(callback:any)；

}

exportinterfaceIChartFrame

{

//----方法----

buildFrame(root,frameMargins:frameControls.marginsData,borderSize:number)；

//----属性----

title():string；

title(value:string):IChartFrame；

showGridLines():bool；

showGridLines(value:bool):IChartFrame；

showLegend():bool；

showLegend(value:bool):IChartFrame；

showTitle():bool；

showTitle(value:bool):IChartFrame；

showPlotBorder():bool；

showPlotBorder(value:bool):IChartFrame；

showLeftAxis():bool；

showLeftAxis(value:bool):IChartFrame；

showTopAxis():bool；

showTopAxis(value:bool):IChartFrame；

showRightAxis():bool；

showRightAxis(value:bool):IChartFrame；

showBottomAxis():bool；

showBottomAxis(value:bool):IChartFrame；

showLeftLabel():bool；

showLeftLabel(value:bool):IChartFrame；

showTopLabel():bool；

showTopLabel(value:bool):IChartFrame；

showRightLabel():bool；

showRightLabel(value:bool):IChartFrame；

showBottomLabel():bool；

showBottomLabel(value:bool):IChartFrame；

xScale():any；

xScale(value:any):IChartFrame；

yScale():any；

yScale(value:any):IChartFrame；

attributeScales():any；

attributeScales(value:any):IChartFrame；

//----只读属性----

plotAreaBounds():ClientRect；

isVisible():bool；

isVisible(value:bool):IChartFrame；

}

exportinterfaceIPlotextendsbatchDraw.IBatchContext

{

//drawShapes(info:IDrawInfo)；

parent():IChart；

parent(value:IChart):IPlot；

getImageSheetCallback():any；

getImageSheetCallback(value:any):IPlot；

attachOnLayerDrawingCompleted(callback:any)；

isLayerDrawing():bool；

}

//这是图3中称为“IPlotPart”的接口。

exportinterfaceIBatchContextextendsIAttributesPlus

{

//----方法----

draw(shaderContextData:batchDraw.shaderContextData)；

//buildToAttrDataAndScale(facetInfo:IFacetInfo)；

drawNextChunk(firstCall:bool)；

getPixels(x:number,y:number,w:number,h:number):any；

getCanvasUrl():string；

calcUiStateIndex()；

cancelDrawing()；

addChangedAttributeToFrom(attrName,currValue,newValue,forceAdd？:bool):bool；

deleteHitTestMap()；

buildAxisScales(scd:batchDraw.shaderContextData)；

finishToAndFromAttributes(scd:batchDraw.shaderContextData)；

validateAttributes()；

//对前一绘制调用中绘制的形状构建命中测试映射。

buildHitTestMap(firstCall:bool)；

attachOnPartDrawingCompleted(callback:(was3d:bool,wasAnimated:bool,fps:number)＝>void)；

attachOnStatsChanged(callback)；

attachOnDataChanged(callback)；

//----属性----

shapeType():batchDraw.shapeType；

shapeType(value:batchDraw.shapeType):IBatchContext；

isAnimationEnabled():bool；

isAnimationEnabled(value:bool):IBatchContext；

isHitTestingEnabled():bool；

isHitTestingEnabled(value:bool):IBatchContext；

//defaultColorPalette():any[]；

//defaultColorPalette(value:any[]):IBatchContext；

imageSheet():batchDraw.IShapeSheet；

imageSheet(value:batchDraw.IShapeSheet):IBatchContext；

propertyChangedCallback():(propName:string,value:any)＝>void；

propertyChangedCallback(value:(propName:string,value:any)＝>void):

IBatchContext；

data():batchDraw.INvfData；

data(value:any):IBatchContext；

shaders():batchDraw.IPlotShader[]；

shaders(value:batchDraw.IPlotShader[]):IBatchContext；

animationInterval():number；

animationInterval(value:number):IBatchContext；

container():batchDraw.IContainer；

container(value:batchDraw.IContainer):IBatchContext；

xScale():batchDraw.IAxisScale；

xScale(value:batchDraw.IAxisScale):IBatchContext；

yScale():batchDraw.IAxisScale；

yScale(value:batchDraw.IAxisScale):IBatchContext；

//----只读属性----

toAttributes():batchDraw.attributeSet；

fromAttributes():batchDraw.attributeSet；

uiStateColFrom():batchDraw.INvfColumn；

isPartDrawing():bool；

lastDrawWasAnimated():bool；

lastDrawFps():number；

}

///这是至形状绘制引擎的接口的一部分。

exportinterfaceICamera

{

//通过相关“因素”来缩放当前视图，

//缩放中心位于screenX(屏幕X),screenY(屏幕Y)。

adjustZoom(factor:number,screenX:number,screenY:number):void；

//通过deltaX,deltaY来平移当前视图。

adjustPan(deltaX:number,deltaY:number):void；

//将平移与缩放重置为它们的默认值。

resetPanAndZoom():void；

//当屏幕大小变化时更新相机。

updateScreenSize(width:number,height:number):void；

}

//这是至形状绘制引擎的接口。

exportinterfaceIBatchDrawextendsICamera

{

getPixels(x:number,y:number,w:number,h:number):any；

//绘制单个(非动画)帧。

drawFrame(toAttribs:attributeSet,offset:number,count:number,maxTimeSlice:number,scd:shaderContextData):number；

//绘制动画的第一帧。

drawFirstAniFrame(fromAttribs:attributeSet,toAttribs:attributeSet,count:number,maxTimeSlice:number,fromScd:shaderContextData,scd:shaderContextData):number；

//绘制进行中的动画的下一帧。

drawNextAniFrame(percent:number,maxTimeSlice:number):number；

//构建为进行后续"hitTestPoint()"以及"hitTestRect()"调用所需的info(信息)。

buildHitTestMap(toAttribs:attributeSet,offset:number,count:number,timeSlice:number,rowIndexData:any,additive:bool,scd:shaderContextData):number；

//删除用于命中测试的数据(以及自由空间)。

deleteHitTestMap():void；

//返回x,y处最前面的形状的dataRow(数据行)索引。

hitTestPoint(x:number,y:number):number[]；

//返回指定矩形中找到的形状的行索引。

hitTestRect(rc:ClientRect):number[]；

//返回用于绘制最后一批形状的CPU功能或GPU着色器。

getShaderText(was3dDraw,getFragShader:bool):string；

showPickMap():bool；

showPickMap(value:bool):IContainer；

showPickMap(value？:bool):any；

}

exportinterfaceIDrawParams

{

layoutType:layoutType；

bins:IBinInfo[]；

facetInfo:IFacetInfo；

//----当涉及shapeType(形状类型)变化时，关闭动画----

shapeType:shapeType；

//----使用单个imageSheet(图像表单)来保持FROM颜色图像和TO颜色图像两者----

//----这允许GPU侧使用单个纹理和采样器(更容易的代码)。----

imageSheet:IShapeSheet；

rowIndexData:any；

}

exportinterfaceIPlotShader

{

name():string；

getParamSettings？():string；

mapAttributes(scd:batchDraw.shaderContextData,attrSet:attributeSet,attrMap:{[index:string]:batchDraw.attributeMapItem；}):void；

emitConstants(scd:batchDraw.shaderContextData,emitter:ICodeEmitter):void；

emitScalingCode(scd:batchDraw.shaderContextData,emitter:ICodeEmitter):void；

}

exportinterfaceIChangeAgent

{

//----方法----

unregister()；

//----属性----

data():any；

data(value:any):IChangeAgent；

shareName():string；

appName():string；

processId():string；

externalShare():bool；

viewName():string；

dataChangedCallback():any；

}

下文是同样使用TypeScript(类型脚本)表示的可能有用的一些其他示例性接口。

//这在单个属性上实现了链接属性，且是通过IBatchContext、IPlot或IChart到属性的主要接口。

//仅外部属性通过该接口被暴露。对于内部操作，直接使用属性的类(attributeInfoClass)来访问属性。

exportinterfaceIAttributeInfo

{

name():string；

colName():string；

colName(value:string):IAttributeInfo；

constant():any；

constant(value:any):IAttributeInfo；

customPalette():any[]；

customPalette(value:any[]):IAttributeInfo；

customScale():stdScaleData；

customScale(value:stdScaleData):IAttributeInfo；

scaling():scalingType；

scaling(value:scalingType):IAttributeInfo；

isDefaultSettings():bool；

isValueSet():bool；

clone():IAttributeInfo；

pop():IAttributesPlus；//返回属性的父

}

exportinterfaceIAttributesPlus

{

//----这些是预定义的属性，支持预定义的shapeTypes(形状类型)----

x():IAttributeInfo；

x(value:any):IAttributesPlus；

y():IAttributeInfo；

y(value:any):IAttributesPlus；

z():IAttributeInfo；

z(value:any):IAttributesPlus；

size():IAttributeInfo；

size(value:any):IAttributesPlus；

width():IAttributeInfo；

width(value:any):IAttributesPlus；

height():IAttributeInfo；

height(value:any):IAttributesPlus；

color():IAttributeInfo；

color(value:any):IAttributesPlus；

stroke():IAttributeInfo；

stroke(value:any):IAttributesPlus；

opacity():IAttributeInfo；

opacity(value:any):IAttributesPlus；

imageIndex():IAttributeInfo；

imageIndex(value:any):IAttributesPlus；

group():IAttributeInfo；

group(value:any):IAttributesPlus；

//不被暴露给外部代码。

//facet():IAttributeInfo；

//facet(value:any):IAttributesPlus；

uiState():IAttributeInfo；

uiState(value:any):IAttributesPlus；

}

可能存在多个图表在同一页面中运行，在不同应用(包括一个或多个浏览器或其他应用)中运行，或甚至在不同机器上运行。changeMgr(变化管理器)组件可在图表实例之间传递变化通知。changeMgr组件可具有在需要时使用的相关的服务器实现。例如，changeMgr组件可被用于在加入同一共享信道的图表之间同步uiState(UI状态)信息。

例如，changeMgr组件可被用于在进行中的以及外部/联网的视图之间共享变化信息。举一个具体示例，假设有称为“xPlot”的基于HTML的图表应用。该图表应用一次在数据表的一个集合上操作，但提供该数据的多个视图。xPlot中的每个视图可执行调用，诸如：

varchangeAgent＝vp.changeMgr.registerView(shareName,appName,externalShare,onChangedFunc)；

参数“shareName”是共享数据的名称。使用不同名称可在应用内或应用之间建立多个共享信道。

参数“appName”(应用名)是正被运行的应用的友好名称。在上面的示例中，“appName”将是“xPlot”。

参数“externalShare”(外部共享)控制共享是否延伸到当前机器外部。如果“externalShare”被设为“true”(真)，则ChangeService(变化服务)(运行在主控服务器上)将被使用来在共享客户机之间中继数据。

参数“onChangedFunc”是只要一变化代理用信号通知有东西改变了的情况下就由changeMgr调用的回调函数。视图可根据changeAgent.data属性中的数据而关闭或重建。

正被共享的“数据”(如changeAgent.data)可以是任何事物，但是在和类似的实现中，它可以是持有数据的属性(如数据源名、选择查询、过滤查询、突出显示查询等)的JSON对象。

每当“数据”中的某物被一视图改变时，该视图可避免直接更新相关联的视图元素，而是使用“changeAgent.ChangeData()”来这么做，然后在更新视图之前等待回调被调用。

在TypeScript(类型脚本)中，实现changeMgr的一示例性接口的一个示例性方式如下：

exportinterfaceIChangeMgr

{

register(agent:IChangeAgent)；

unregister(agent:IChangeAgent)；

}

图4-16是一般地表示根据本文所述的主题的各方面可能发生的示例性动作的流程图。为阐述简明起见，结合图4-16描述的方法被描绘和描述为一系列动作。要理解和明白，本文所述的主题的各方面不受所例示出的各动作和/或各动作次序的限制。在一个实施例中，各动作以如下描述的次序发生。然而，在其它实施例中，各动作可以并行地发生、以另一次序发生、和/或与本发明未呈现和描述的其它动作一起发生。此外，并非所有示出的动作都是实现根据本文所述的主题的各方面的方法所必需的。另外，本领域的技术人员将了解和明白，该方法也可以替代地经由状态图而被表示为一系列相互关联的状态或者被表示为事件。

基于本文的教导，图4-16中所描述的大多数动作将被本领域技术人员容易理解。为了获得更多信息，图4-16中的某些动作将在下文中被调出并被更详细地描述。

转向图4，在框405处，动作开始。在框410，容器(如绘制表面或数据结构)被清空。在框415，上下文数据被创建以及图表相关域被填充。在框415，小面信息(如果有的话)以及UI状态相关信息也被填充。在框420，如果变化是悬停变化，则框425-430的动作可被跳过。这加速了渲染，当用户正在执行悬停输入时这可被注意到。

在框425，通过将上下文数据提供给绘制组件来从主绘图获得轴标度。在框430，图表框架代码被使用来绘制图表的框架(如轴、网格线、标题、图例等)。在框435，每个绘图被指示来绘制自己(图5中更详细地描述)，并被提供上下文数据。在框440，可以执行其他动作(如果有的话)。

转向图5，某些着色器可与某些部件相关联。如果一批形状包括某一部件，则该着色器可被添加。默认的着色器可用于处理其他着色器不处理的任何属性。默认着色器为它所支持的每个属性提供标准缩放变量和代码。

UI状态着色器应对悬停和选择颜色，以及隐藏被滤除的形状。小面着色器将单个绘图分解为1个或多个“小面”，一个小面基于某一属性的值或值范围。

当GPU或CPU着色器代码正被生成时，批绘制引擎询问每个绘图着色器它希望拥有哪些属性或对哪些属性起作用。如果某一绘图着色器拥有一属性，则该绘图着色器负责生成缩放和常量生成代码。如果某一绘图着色器对某一属性起作用，则该绘图着色器将发出代码来调整某一属性的值。

在框505，动作开始。在框510，着色器被添加到每一部件。在框515，指令被发送至每个部件以绘制自己。上下文数据被传递给该部件。在框520，动作返回并在图4的框440处继续。

转向图6，在框605处，动作开始。在框610，部件相关域在上下文数据中被填充。在框615，调用mapShaderAttributes(映射着色器属性)，传递FROM属性、FROM绘图着色器以及FROM上下文数据。在框620，调用mapShaderAttributes，传递TO属性、TO绘图着色器以及上下文数据。

在框625，可从给定数据集获得NVF格式的数据指针以及缩放信息。可为FROM和TO属性设置“数据”和“缩放”。

在框630，基于各种因素设置isAnimated(被动画化)。一些示例因素包括：存在FROM属性(如果发现，则这指示出可能需要动画)，以及缺少任何动画防止变化。此外，其他因素包括确定是否有任何事物从上一绘制发生了将造成视觉差异的改变。

在框635处，如果isAnimated为真，则动作在框645处继续；否则，动作在框640处继续。

在框640，执行与图7相关联的动作。在框645，如结合图8更详细描述的那样，设置一动画计时器。在框650，如结合图9更详细描述的那样，绘制第一动画帧。在框655，在调用了图6的动作的动作之后，动作继续。

转向图7，当执行静态帧绘制(与动画相比)时适用。形状的大型的集合(如1百万以上)可以分块的方式被绘制，直到最大指定形状计数，混合有短的空闲时间段(如500ms)，允许在绘制大型集合的同时UI保持响应性。除了分块之外，由于有时难以预测能够在响应时间内被绘制的最大形状计数，CPU计时器也可被使用来限制每个绘制调用中所花费的时间。如果在某一分块被绘制之前CPU计时器到期，则这可停止对当前分块的绘制并使得动作在框715处继续。

在框705，动作开始。在框710，调用drawFrame(绘制帧)，传递TO属性、上下文数据、偏移以及长度。在框715处，如果有更多的分块要绘制，则动作在框720处继续；否则，动作在框725处继续。在框720，设置计时器以在一段时间经过之后调用drawNextChunk(绘制下一分块)。在框707，在计时器到期之后，动作在框710处继续。在框725，在调用了图7的动作的动作之后，动作继续。

转向图8，在框805处，动作开始。在框810，计算动画完成百分比。

在框810，可应用缓动功能(easingfunction)。

缓动功能可通过调整用于绘制动画中的每一帧的“百分比”值来变换线性动画。没有缓动功能，“百分比”值随着自从动画开始以来的累积时间而线性变化。缓动功能提供了改变这种情况的机会，通常基于动画的开始和结束附近的“in”(进入)和“out”(离开)点。

例如，当开始和结束一动画序列时，可引入一延迟，该延迟随着帧最初被显示而减少，然后在动画序列的结束附近增加。该延迟可被引入，例如用来在动画开始时向动画增加平滑性。在一个实现中，缓动功能是对数函数。

在框820，如果百分比是100％，则动作在框825处继续；否则，动作在框830处继续。

在框825，动画计时器停止。

在框830，如结合图11更详细描述的那样，绘制下一动画帧。在框835，在调用了图8的动作的动作(如另一图的动作)之后，动作继续。

参考图9和10，框910和1010处指示出的各种因素可包括例如：图形处理单元(GPU)是否可用、被启用、以及能够绘制当前批的形状(如基于ShapeType和TO属性的设置)。对于动画，一旦确定使用CPUDraw或GPUDraw，则该判断可保持有效直到动画结束。

图4-14的动作可响应于调用程序(如某一应用程序或其他进程)发送绘制一组形状的请求而被执行。该请求作为批形状绘制引擎的接口被接收。形状具有在形状之间公共的形状类型。有特定数量的形状，该数量在该请求中被指示出。形状具有由该请求所指示的且要在绘制形状时被使用的恒定的和数据映射的属性值。

响应于调用程序绘制该组形状的请求，在一个实现中，调用程序可接收至少一些形状已被绘制的指示。例如，如果时间分片被启用且CPU绘制正被执行，则图形绘制框架可以分块方式绘制形状，使得系统可保持对用户输入的响应性。

转向图9，在框905处，动作开始。

在框910，基于如先前所述的各种因素设置变量(如useGPU(使用GPU))。

在框915，如果该变量(如useGPU)为真，则动作在框920处继续；否则，动作在框925处继续。

在框920，调用GPUDraw.drawFrame。当GPUDraw.drawFrame被调用时，适合于GPU来绘制特定于由调用程序所指定的恒定的和数据映射的属性值的该组形状的GPU代码被生成。这可如本文其他地方已经描述的那样完成。该GPU代码可省略测试在绘制形状之前已知或可知的值的任何条件语句。例如，测试形状类型的条件语句可被省略，因为形状类型是已知的。“可知的”值是在绘制形状之前可被计算出的值。

例如，为了缩放某一数字，该数字可乘以另一数字。可在绘制之前计算乘积。作为另一示例，循环可被展开，而循环检查代码(如条件语句)可被省略。这些示例并不旨在是包括一切的或是穷举的。实际上，基于本文教导，本领域技术人员可认识到条件语句可被省略的其他示例，而不背离本文所述的主题的各方面的精神或范围。

在框925，调用CPUDraw.drawFrame。当CPUDraw.drawFrame被调用时，适合于CPU来绘制特定于由调用程序所指定的恒定的和数据映射的属性值的该组形状的CPU代码被生成。这也可如本文其他地方已经描述的那样完成。此外，该CPU代码也可省略测试在绘制形状之前可知的值的任何条件语句。

在框930，在调用了图9的动作的动作(如另一图的动作)之后，动作继续。

转向图10，在框1005处，动作开始。在框1010，基于如先前所述的各种因素设置变量(如useGPU(使用GPU))。在框1010处，如果该变量(如useGPU)为真，则动作在框1020处继续；否则，动作在框1025处继续。在框1020，调用GPUDraw.drawFirstAniFrame。在框925，调用CPUDraw.drawFirstAniFrame。在框1030，在调用了图10的动作的动作(如另一图的动作)之后，动作继续。

转向图11，在框1105处，动作开始。在框1110，基于如先前所述的各种因素设置变量(如useGPU(使用GPU))。在框1115处，如果该变量(如useGPU)为真，则动作在框1120处继续；否则，动作在框1125处继续。在框1120，调用GPUDraw.drawNextAniFrame。在框925，调用CPUDraw.drawNextAniFrame。在框1130，在调用了图11的动作的动作(如另一图的动作)之后，动作继续。

关于提及CPUDraw.drawFrame的任何附图，该方法可执行包括以下的动作：

1.通过调用emitDrawFrame()，传递toAttributes(to属性)、SCD以及TimeSlice(时间分片)数据来生成CPU“着色器代码”；以及

2.调用所生成的着色器代码，传入toAttributes(to属性)、偏移、计数以及TimeSlice(时间分片)数据。

关于提及CpuDraw.drawFirstAniFrame的任何附图，该方法可执行包括以下的动作：

1.通过调用emitDrawFrame()，传递fromAttributes(from属性)、toAttributes(to属性)、fromSCD(来自SCD)、SCD以及TimeSlice(时间分片)数据来生成CPU“着色器代码”；以及

2.调用所生成的着色器代码，传入fromAttributes(from属性)、toAttributes(to属性)、偏移、计数以及TimeSlice(时间分片)数据。

转向图12，这是CPU绘制代码被生成的地方。时间分片允许绘制周期被切短，使得计算机保持对用户输入的响应性。在CPU绘制周期中以及也许在某些GPU绘制周期中，在系统变得迟滞或对系统的用户无响应之前，可能存在CPU或GPU可在一段时间期间进行的一定量的绘制。时间分片允许渲染在由时间分片所指示的值所限制的分块时间内完成，使得系统可保持对用户输入的响应性。

在框1210，emitDataVariables(发出数据变量)指示出如何发现要被置于图表中的数据。例如，某一声明可声明：varx＝toAttributes.x._data。该数据可被存储为由上述声明所引用的向量。

在框1215，常量被发出。

在框1220，如果动画将要发生，则将调色板从串改变为RGB数组。

在框1225，调用任何预缩放代码。

在框1230，发出在渲染循环内不改变的恒定样式。

在框1235，如果时间分片被请求，则发出时间分片变量声明。如先前所指示的，这可被完成来限制在时间返回前景进程以处理用户输入之前允许用于渲染的CPU时间量。

在框1240，发出批绘制的FOR循环的开始。

在框1245，如果时间分片被请求，则发出时间分片代码。

在框1250，通过调用(正被绘制的部件的)每个绘图着色器为其所拥有或调整的每个属性发出其缩放/调整代码，来发出缩放代码。

在框1255，对正被动画化的每个属性发出线性内插代码。

在框1260，发出代码来改变在绘制循环内变化的值。框1260中指定的属性适用于Canvas2D(HTML5)实现。在其他实现中，可发出适用于底层框架的其他属性。

在框1265，发出形状绘制代码来绘制批中所指示的形状。

在框1270，在调用了图12的动作的动作(如另一图的动作)之后，动作继续。

在图13中，为GPU发出GPU代码。图13中示出的是适用于WebGL(HTML5)实现的步骤。在其他实现中，可发出适用于底层框架的其他属性。数据映射的值是基于命名数据列的属性值。转向图13，在框1305处，动作开始。在框1310，对于数据映射的FROM/TO属性，对每个顶点计算缓冲区项的偏移和总大小。

在框1315，顶点着色器被生成。该代码生成包括通过调用(正被绘制的部件的)每个绘图着色器为其所拥有或调整的每个属性发出其缩放/调整代码，来发出缩放代码。

在框1320，片段(fragment)着色器被生成。

在框1325，从高速缓存加载或按需创建程序。

在框1330，分配CPU阵列来保持数据缓冲区的内容。

在框1335，分配GPU数据缓冲区。

在框1340，用矩形、线以及纹理坐标的数据填充CPU阵列。

在框1345，用每个数据映射的FROM/TO属性的数据填充阵列。

在框1350，某些数据实体被绑定到GPU缓冲区。

在框1355，数据映射的FROM/TO属性被绑定到GPU缓冲区。

在框1360，执行结合图14更详细描述的动作。

在框1365，在调用了图13的动作的动作(如另一图的动作)之后，动作继续。

转向图14，在框1405处，动作开始。在框1410处，如果这是第一帧，则动作在框1415处继续；否则，动作在框1420处继续。在框1415，使用FROM/TO属性来加载着色器恒定值。在框1420，调用DrawArrays(绘制阵列)来从GPU缓冲区、常量以及顶点/分段着色器绘制形状。在框1425，在调用了图13的动作的动作(如另一图的动作)之后，动作继续。

图15是一般地表示根据本文所述的主题的各方面的、从批绘图引擎的调用程序的角度可能发生的动作的流程图。转向图15，在框1505处，动作开始。在1510，绘制形状的请求被发送。例如，某一应用可调用图形绘制框架来绘制一组形状。

在框1515，可接收至少一些形状已被绘制的指示。例如，如果时间分片被启用且CPU绘制正被执行，则图形绘制框架可以分块方式绘制形状，使得系统可保持对用户输入的响应性。在一个实现中，已被绘制的形状的数量被返回。

在框1520，可以执行其他动作(如果有的话)。

批引擎(在附图中有时称为对象容器(Container))可使用GPU(如果可用)或CPU(如果GPU不可用)来成批地绘制形状。批引擎还可进行数据映射和动画化。批引擎将基于输入值或默认值来缩放数据。

数据属性可与值的向量相关联。例如，属性“color”(颜色)可与“sales”(销售额)值的向量相关联。值的向量表示来自当前数据集的数据列。

绘制表面可以被堆叠在一起。例如，具有文本的表面可被堆叠在具有其他图形的表面上。在一个示例中，一个表面可由CPUDraw渲染，而同时另一表面可由GPUDraw渲染。这两个表面然后可被一起显示。

本文所指示出的代码发出器可生成加速图表的渲染的自定义代码。例如，如果批引擎知道它正在处理某一类型的形状，则批引擎可生成绘制该形状而没有询问什么形状正被绘制的条件语句的代码。代码发出器可被结构化以在进行中移除与先前已知一样多的条件语句。

如从上述详细描述中可以看到，已经描述了关于同步可视化的各方面。尽管本文所描述的主题的各方面易于作出各种修改和替换构造，但其某些说明性实施例在附图中示出并在上面被详细地描述。然而，应当理解，并不旨在将所要求保护主题的各方面限制于所公开的具体形式，而是相反地，目的是要覆盖落入本文所描述的主题的各方面的精神和范围之内的所有修改、替换构造和等效方案。

Claims (10)

1.一种至少部分地由计算机实现的方法，所述方法包括：

从调用程序接收绘制一组形状的请求作为批形状绘制引擎的接口，所述一组形状具有在这些形状之间公共的形状类型，所述一组形状具有数量，且所述一组形状具有恒定的和数据映射的属性值，所述请求指示出在绘制这些形状时要被使用的所述形状类型、这些形状的所述数量、以及所述恒定的和数据映射的属性值；

确定主控所述批形状绘制引擎的设备是否具有图形处理单元(GPU)；

如果所述设备具有GPU，则执行第一组动作，所述第一组动作包括：

生成适合于所述GPU绘制特定于由所述调用程序指定的所述恒定的和数据映射的属性值的所述一组形状的GPU代码，所述GPU代码省略了测试在绘制这些形状之前可知的值的条件语句；

如果所述设备不具有GPU，则执行第二组动作，所述第二组动作包括：

生成适合于中央处理单元(CPU)绘制特定于由所述调用程序指定的所述恒定的和数据映射的属性值的所述一组形状的CPU代码，所述CPU代码省略了测试在绘制这些形状之前可知的值的条件语句。

2.如权利要求1所述的方法，其特征在于，如果所述请求涉及动画，则所述请求还指示出恒定的和数据映射的属性值的“from”集合。

3.如权利要求2所述的方法，其特征在于，如果所述设备具有GPU，则所述第一组动作进一步包括生成GPU代码来执行包括以下的动作：

对于动画序列的第一帧：

为每个形状获得from属性，

为每个形状获得to属性，

用from属性和to属性装填GPU缓冲区，

生成着色器代码，以及

为所述恒定的属性值设置参数；以及

对于所述动画序列的所有帧：

设置百分比参数，以及

调用所述GPU的形状绘制代码。

4.如权利要求2所述的方法，其特征在于，如果所述设备不具有GPU，则所述第二组动作进一步包括生成CPU着色器代码来执行包括以下的动作：

对于动画序列的第一帧：

生成代码来：

测试所述动画序列的所述第一帧，如果是所述动画序列的所述第一帧：

为每个形状获得from属性，

为每个形状获得to属性，以及

通过调用绘图着色器来预缩放所述from属性和所述to属性；以及

对于所述动画序列的所有帧：

计算动画化的属性值，以及

使用所述恒定的和数据映射的属性以及所述动画化的属性值来绘制形状；以及

在生成所述CPU着色器代码之后，使用不同的百分比参数执行所述CPU着色器代码以绘制所述动画序列的每一动画帧，每个百分比参数充当标识相应的动画帧的索引。

5.一种在计算环境中的系统，包括：

构造成存储批形状绘制引擎的存储器；

构造成提供输出数据的图形表示的图形输出设备；以及

耦合于所述存储器以及所述视觉输出设备的处理器，所述处理器被编程来执行动作，所述动作包括：

从调用程序接收绘制一组形状的请求作为所述批形状绘制引擎的接口，所述一组形状具有在这些形状之间公共的形状类型，所述一组形状具有数量，且所述一组形状具有恒定的和数据映射的属性值，所述请求指示出在绘制这些形状时要被使用的所述形状类型、这些形状的所述数量、以及所述恒定的和数据映射的属性值，

确定系统是否具有可用于所述批形状绘制引擎的图形处理单元(GPU)，

如果所述系统具有可用于所述批形状绘制引擎的GPU，则执行第一组动作，所述第一组动作包括：

生成适合于所述GPU绘制特定于由所述调用程序指定的所述恒定的和数据映射的属性值的所述一组形状的GPU代码，所述GPU代码省略了测试在绘制这些形状之前可知的值的条件语句，

如果所述系统不具有可用于所述批形状绘制引擎的GPU，则执行第二组动作，所述第二组动作包括：

生成适合于所述处理器绘制特定于由所述调用程序指定的所述恒定的和数据映射的属性值的所述一组形状的处理器代码，所述处理器代码省略了测试在绘制这些形状之前可知的值的条件语句。

6.如权利要求5所述的系统，其特征在于，所述处理器被进一步编程来执行附加动作，所述附加动作包括：如果所述请求涉及动画，则从所述请求标识恒定的和数据映射的属性值的“from”集合。

7.如权利要求6所述的系统，其特征在于，所述处理器被进一步编程来执行额外动作，所述额外动作包括：如果所述系统具有可用于所述批形状绘制引擎的GPU，则所述第一组动作进一步包括生成GPU代码来：

为每个形状获得from属性；

为每个形状获得to属性；以及

为每个形状创建动画代码，所述动画代码在被执行时示出形状从from属性到to属性的移动

以及其中如果所述系统不具有可用于所述批形状绘制引擎的GPU，则所述第二组动作进一步包括生产处理器代码来：

为每个形状获得from属性；

为每个形状获得to属性；以及

为每个形状创建动画代码，所述动画代码在被执行时示出形状从from属性到to属性的移动。

8.如权利要求5所述的系统，其特征在于，所述处理器被进一步配置成执行附加动作，所述附加动作包括：如果所述设备不具有GPU，则所述第二组动作进一步包括生成处理器代码来：

声明一个或多个时间分片变量；

定义循环，其中在所述循环的迭代期间绘制被执行；

通过使用所述一个或多个时间分片变量来在循环的每次迭代期间检查绘制时间是否已经超出，如果是，则跳出循环以允许所述设备变得对用户输入具有响应性。

9.一种具有计算机可执行指令的计算机存储介质，所述计算机可执行指令在被执行时执行以下动作，包括：

从调用程序经批形状绘制引擎的接口发出绘制一组形状的请求，所述一组形状具有在这些形状之间公共的形状类型，所述一组形状具有数量，且所述一组形状具有恒定的和数据映射的属性值，所述请求指示出在绘制这些形状时要被使用的所述形状类型、这些形状的所述数量、以及所述恒定的和数据映射的属性值；

接收至少一些形状已由所述批绘制引擎经生成的可执行代码绘制的指示，所述可执行代码适用于绘制特定于由所述调用程序指定的所述恒定的和数据映射的属性值的所述一组形状，所述可执行代码省略了测试在绘制这些形状之前可知的值的条件语句。

10.如权利要求9所述的计算机存储介质，其特征在于，进一步包括在绘制所有形状之前暂停绘制形状，如果绘制时间已经超出则所述可执行代码从绘制循环跳出以允许主控所述调用程序的设备变得对用户输入具有响应性。