在刚发布的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中还有不少功能的增强,有待大家一起发掘了!