Dojo 1.6 图表库新特性介绍

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

1. 网状图（Spider Chart）

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

使用方法：

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

<!-- 图表控件的div容器 --> <div id="chart" style="width: 500px; height: 400px;"></div> ... dojo.require("dojox.charting.Chart"); dojo.require("dojox.charting.plot2d.Spider"); dojo.require("dijit.Tooltip"); var chart = new dojox.charting.Chart("chart"); chart.addPlot("default", { type: "Spider", divisions: 7, }); chart.addSeries("China", {data: {"GDP": 2,"area": 6,"population": 2000,"inflation": 15,"growth": 12}}, { fill: "blue" }); chart.addSeries("France", {data: {"GDP": 6,"area": 15,"population": 500,"inflation": 5,"growth": 6}}, { fill: "red" }); chart.addSeries("USA", {data: {"GDP": 3,"area": 20,"population": 1500,"inflation": 10,"growth": 3}}, { fill: "green" }); chart.addSeries("Japan", {data: {"GDP": 4,"area": 2,"population": 1000,"inflation": 20,"growth": 2}}, { fill: "yellow" }); chart.addSeries("Korean", {data: {"GDP": 10,"area": 10,"population": 800,"inflation": 2,"growth": 18}}, { fill: "orange" }); chart.addSeries("Canada", {data: {"GDP": 1,"area": 18,"population": 300,"inflation": 3,"growth": 15}}, { fill: "purple" }); chart.render();

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

网状图的刻度轴：

2. 可交互的图例（Selectable Legend）

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

ABC图表数据同时显示：

BC数据被隐藏：

使用方法：

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

<!-- 图例容器 --> <div id="legend"></div> var legend = new dojo.charting.widget.SelectableLegend({chart: chart, horizontal: true}, "legend");

3. 新的饼图图表标签（Smart Pie Label）

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

Dojo1.6之前的饼图标签：

Dojo1.6的饼图标签：

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

chart.addPlot("default", { type: "Pie", labelStyle: "columns", fontColor: "#ccc", labelWiring: "#ccc", radius: 100, }).addSeries(...).render().

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

4. 图表标题与坐标轴标题（Chart Title & Axis Title）

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

图表标题：

图表标题的添加方式：

<!-- 图表容器 --> <div id="chart"></div> ... var chart = new dojox.charting.Chart("chart", {title: "Production(ton)"}); chart.addPlot(...).addAxis(...).addSeries(...).render();

坐标轴标题：

坐标轴标题的添加方式：

chart.addAxis("x", { // 坐标轴标题参数 title: "Quarter of 2010", titleGap: 15, titleFontColor: "orange", titleOrientation: orientation, labels: [ {value: 0, text: ""}, {value: 1, text: "1 Qtr"}, {value: 2, text: "2 Qtr"}, {value: 3, text: "3 Qtr"}, {value: 4, text: "4 Qtr"}, {value: 5, text: "End"} ] })

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

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

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

5. 坐标轴标签的缩略功能（Label Shortening）

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

缩略标签的配置：

addAxis("x", { labels: [ {value: 0, text: "first start point"}, {value: 2, text: "two"}, {value: 5, text: "last end point"} ], maxLabelSize: 20, trailingSymbol: "..." })

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

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

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