如何在Wijmo中使用旭日图和瀑布图?

在 Wijmo 2016 V2 版本中，新添加了两种图表类型--旭日图和瀑布图。

那么，在 Wijmo 中如何使用旭日图和瀑布图呢？

下面，小编来讲述具体的使用方法。

在 JavaScript 的应用中使用旭日图的步骤：

1. 添加 AngularJS，Wijmo 和 Wijmo 的 AngularJS 指令的引用。

2. 在程序模块中包括 Wijmo 5指令： var app = angular.module('app', ['wj']);

3. 增加控制器提供数据和逻辑。

4. 增加 Wijmo 旭日图控件到页面中并且进行数据绑定。

5. （可选）增加一些 CSS 定制输入控件的外观。

基本特点

旭日图控件有5个基本的属性允许定制它的布局和外观：

• innerRadius：指定控件的内径支持圆环图。

• 偏移：指定从控件中心开始的切片的偏移量。

• 由 startAngle：从9点中位置开始，指定角度开始画切片。

• 调色板：指定一个默认的颜色数组来渲染切片。

• 逆转：决定控件化切换时顺时针（假）或逆时针（真）。

图例和标题

图例属性能被用于自定义图表的图例外观。页面和页脚属性能被用于增加一个标题给旭日图控件。

下面这个例子允许你实时的修改旭日图的 legend.position，页眉， 页脚属性。

选择

旭日图控件允许您通过点击或触摸切片来选择数据点。使用 selectionMode 属性指定你是否想通过数据点进行选择或者根本不选择（默认）。

给点设置 selctionMode 属性后，当用户在切片上点击的时候将会引起旭日图更新 selection 属性，并且应用 "wj-state-selected" 类给选中的元素。设置旭日图的的 SelectionMode 给系列或者设置为无将会禁用控件内部的选择。

旭日图提供了三个属性来自定义选择：

• selectedItemOffset：指定从控件中心开始的选中的切边的偏移量。

• selectedItemPosition：可供使用指定选中的切片的位置的选项是上，下，左，右，和无（默认）。

• isAnimated：决定是否动画方式进行选择。

主题

旭日图控件的外观很大程度上是在 CSS 中定义。除了默认的主题我们也包括了一些专业设计的主题，可以自定义 Wijmo 控件的外观实现一个一致的，有吸引力的外观。

你也可以使用 CSS 自定义旭日图的外观。为了实现这个，你需要从默认的 CSS 拷贝出一个新的 CSS 文件，然后修改你需要的属性。

如何使用 Wijmo 的 FlexChar 控件的函数系列和趋势线？

FlexChart 趋势线

你可以设置 趋势线的 fitType 属性以使用不同的趋势线类型 绘图区上的点也已被鼠标拖拽，这将会自动更新趋势线和它的方程。

FlexChart 移动平均线

你可以通过设置移动平均的 type 属性以使用不同的移动平均类型。

MovingAverage 类拥有一个 period 属性，允许您设置计算平均值的周期。

FlexChart Y 函数系列

Y函数系列允许绘制一个由公式y=y（x）定义的函数。 使用 func 指定这个函数。

FlexChart 参数函数系列

参数函数系列允许绘制一个使用公式 x = x(t) 和 y = y(t)进行参数化定义的函数。使用 xFunc 和yFunc 属性来指定x和y坐标的函数。

FlexChart 瀑布图

瀑布图系列通常用于演示起始位置如何通过一系列的变化提高或降低。

ComponentOne 产品线

Wijmo 是葡萄城 ComponentOne 产品线之一。ComponentOne 产品线包括 ComponentOne Studio（.Net控件集）、Wijmo（H5/JavaScript控件集）、Xuni（移动开发控件集）。 作为跨设备跨平台的控件集，ComponentOne 产品线的3大产品，能满足. NET、Web、移动等各种平台的高效开发。

免费试用

请通过以下方式联系葡萄城，获取 Wijmo 的免费试用版及全功能演示：

微信：GrapeCityDT

邮件：marketing.xa@grapecity.com

官网：wijmo.gcpowertools.com.cn

关于葡萄城控件

葡萄城是一家跨国软件研发集团，专注控件领域近30年，是全球最大的控件提供商，也是微软认证的金牌合作伙伴。