Dojo 1.6 图表库新特性介绍

前端之家收集整理的这篇文章主要介绍了Dojo 1.6 图表库新特性介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在刚发布的Dojo1.6中,Dojo Charting库在进一步提高稳定性之外,又增加了不少新特性,让我们来瞧瞧吧!

1. 网状图(Spider Chart)

网状图是一种相当常见的图表类型,最适合表现多个对象在指定的几个属性上的比较, 比如几个篮球俱乐部在运营情况、球员能力、教练水平、市场规模等几个指标上的比较。

使用方法

网状图的声明方式与其他图表的声明方式相比,不需要添加坐标轴。示例代码如下:

网状图不需要坐标轴,刻度尺的精度是由divisions参数决定,上面的代码里的divisions参数为7,表示所有刻度尺被分成了7个小刻度。

网状图的刻度轴:

2. 可交互的图例(Selectable Legend)

在新发布的图表控件库中,一个重大的改进是为所有的图表控件提供了可交互的图例,允许用户点击图例前的勾选框显示或者隐藏对应的图表数据。可交互的图例还提供通过图例来高亮对应的图表数据的特性。可交互的图例方便用户在众多图表数据里查看自己关心的数据。

ABC图表数据同时显示

BC数据被隐藏:

使用方法

可交互的图例的添加方式与普通的图表图例类似:

3. 新的饼图图表标签(Smart Pie Label)

在1.6之前的饼图图表中,经常会出现标签相互重叠的情况,导致完全看不清楚。新的1.6版本图表库为饼图提供了一种新的标签排列方式———列对齐,在饼图的两边将对应的标签对齐排列,从而避免了标签重叠的问题。

Dojo1.6之前的饼图标签

Dojo1.6的饼图标签

将饼图标签按列对齐也很简单,只要在声明中添加 labelStyle: "columns" 就可以了。

上面代码中的labelWiring用来定义标签与饼图连线的颜色。

4. 图表标题与坐标轴标题(Chart Title & Axis Title)

图表标题与坐标轴的标题是比较常用的功能,图表库在1.6中也加入了对标题支持,而且可以对标题的位置和样式进行定制。

图表标题

图表标题添加方式:

坐标轴标题

坐标轴标题添加方式:

这里有两个参数需要解释一下: titleGap和titleOrientation; titleGap用来定义标题与对应坐标轴的距离, 而titleOrientation有两个可选值:"axis"与"away":

titleOrientation: "axis" (坐标轴在顶部)

titleOrientation: "away"(坐标轴在底部)

5. 坐标轴标签的缩略功能(Label Shortening)

在坐标尺上的标签比较长时,容易发生标签重叠。针对这种情况,Dojo1.6的图表库提供了标签的缩略功能,将超过指定长度的标签缩略,再给缩略后的标签添加tooltip,鼠标移上去时显示完整标签

缩略标签的配置:

其中maxLabelSize的单位是px,trailingSymbol用来表示长标签被缩略的部分。

除了用缩略标签来防止标签重叠外,还有一种很好的实践——旋转标签,同样可以达到防止重叠的目的,而且更直观,但是整个图表需要占用更大的空间,要看情况来选择解决方案。标签旋转功能在dojo1.5中已经提供。

图表库在Dojo1.6中还有不少功能的增强,有待大家一起发掘了!

猜你在找的Dojo相关文章