Dojo 1.6 图表库新特性介绍

一时失言乱红尘 2022-04-17 00:07 220阅读 0赞

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

## **1. 网状图（Spider Chart）** ##

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

![0_1302945651zA9w.gif][]

**使用方法：**

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

<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个小刻度。

网状图的刻度轴：

![0_130309620988DJ.gif][]

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

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

ABC图表数据同时显示：

![0_1303103966NzM6.gif][]

BC数据被隐藏：

![0_1303104006t011.gif][]

**使用方法：**

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

<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之前的饼图标签：

![0_1303105990g1fZ.gif][]

Dojo1.6的饼图标签：

![0_1303053742bkPF.gif][]

将饼图标签按列对齐也很简单，只要在声明中添加 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中也加入了对标题的支持，而且可以对标题的位置和样式进行定制。

图表标题：

![0_1303053833ZGs0.gif][]

图表标题的添加方式：

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

坐标轴标题：

![0_1303094291MJJ0.gif][]

坐标轴标题的添加方式：

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" (坐标轴在顶部)

![0_1303109060sESk.gif][]

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

![0_1303109077xyE9.gif][]

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

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

![0_1303054837h61I.gif][]

缩略标签的配置：

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中已经提供。

![0_1303110459z83H.gif][]

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

[0_1302945651zA9w.gif]: /images/20220417/ee5b88d2a907465aa855e156b130149e.png
[0_130309620988DJ.gif]: /images/20220417/6ca31ff3ea404488a62a2b6d416cf116.png
[0_1303103966NzM6.gif]: /images/20220417/59bf1f1f09f0471ead6c2e8218f897bf.png
[0_1303104006t011.gif]: /images/20220417/710236d7a09f4bf8a23e961c02d6688c.png
[0_1303105990g1fZ.gif]: /images/20220417/6b8431bb7ea04bd08c299fef188a31cd.png
[0_1303053742bkPF.gif]: /images/20220417/aac06408e2d444c685c796766c82c210.png
[0_1303053833ZGs0.gif]: /images/20220417/287760de6e394a899be74d5c77230832.png
[0_1303094291MJJ0.gif]: /images/20220417/ccde9497ab0546f78664ebd896982b12.png
[0_1303109060sESk.gif]: /images/20220417/13e0b052731b4ef48b5367c410d4bce8.png
[0_1303109077xyE9.gif]: /images/20220417/ed8f65ad9f31408ba02cc5fb3a2e4156.png
[0_1303054837h61I.gif]: /images/20220417/2c36a3e3fa6448cdae84ebff12eaee72.png
[0_1303110459z83H.gif]: /images/20220417/7e0e24b693034b25bcbf34ec755f373a.png