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中还有不少功能的增强，有待大家一起发掘了！