dojo 图形显示
随着Web 2.0的流行，诸如Dojo和jQuery之类的Web开发库变得越来越重要。 网页越来越像应用程序。 使用Dojo的制图模块，您可以快速轻松地在网页中添加美观且功能强大的动态图表。
在本文中，学习使用dojox.charting模块的许多功能。 示例和代码示例将带您逐步了解新的Dojo Toolkit 1.5中的图表功能。
图表总览
本节概述了Dojo可视化库中可用的主要图表类型。
折线图
使用基本折线图，您可以在数据点上画线和放置标记。 折线图有几种类型：
- 默认值：通用折线图，能够绘制线，填充线下方的区域并在数据点处放置标记； 如果在将其添加到图表时未指定图类型，则使用此图类型。
- 折线：基本折线图； 使用默认
- 区域：填充数据线下的区域； 使用默认
- 标记：带有标记的线； 使用默认
- 仅标记：标记，无底线； 使用默认
图1显示了带有标记的折线图的示例。
图1.带有标记的折线图
堆积折线图
堆积折线图的选项包括：
- 堆叠：相对于先前数据集绘制的数据集； 默认扩展
- StackedLines：使用线堆叠数据集； 使用堆叠
- StackedAreas：堆积的数据集，在图表线下具有填充区域； 使用堆叠
例如，图2显示了一个堆积面积图，它具有堆积数据集，在图表线下具有填充区域。
图2.堆积面积图
吧台
对于经典条形图，您可以：
- 条形：单杠
- ClusteredBars：具有群集数据集的水平条； 使用酒吧
- StackedBars：带有水平条的堆叠数据集； 使用酒吧
列
柱形图的各种类型为：
- 列：竖线
- ClusteredColumns：带有群集数据集的竖线； 使用列
- StackedColumns：带有竖线的堆叠数据集； 使用列
例如，聚集的列具有带有聚集的数据集的竖线，如图3所示。这是柱形图的更复杂的版本。
图3.集群柱形图
堆积柱形图是柱形图的另一个复杂版本。 它们显示带有竖线的堆叠数据集，如下所示。
图4.堆积柱形图
杂
以下图表属于其他类别：
- 派：可能是最常见的图表类型之一
- 散点图：与MarkersOnly类似，但是您可以使用渐变字段绘制图表
- 网格：用于向图表添加网格层
饼图是划分为扇区的圆形图表，它说明了比例。
图5.饼图
地图图
在地图中，您可以根据地理数据绘制地图。 在本文末尾了解有关地图的更多信息。
图6.地图
使用Dojo图表
本节概述了Dojo制图的某些功能。
清单1显示了使用Dojo可视化库创建图表的基础。 有四种方法： addAxis ， addPlot ， addSeries和render 。
清单1.使用Dojo可视化库创建图表的基础
<div id="test1" style="width: 200px; height: 200px;"></div>
makeObjects = function(){
var chart1 = new dojox.charting.Chart2D("test1");
chart1.addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true});
chart1.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major",
natural: true});
chart1.addPlot("default", {type: "Bars"});
chart1.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"},
fill: "lightpink"});
chart1.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"},
fill: "lightblue"});
chart1.render();
};
dojo.addOnLoad(makeObjects);要配置任何图表，您需要定义三个必要的部分：
-
情节
- 描述如何可视化数据； 例如，列，条或饼图 轴数
- 描述正在可视化的数据的维度； 这是X轴或Y轴定义，包括指定标签文本和标签旋转之类的内容 系列数据
- 描述图表将可视化的数据
绘图配置
addPlot()函数接受两个参数：名称和参数数组。 当您要在图表上具有多个绘图类型时，该名称就是标识符。 arguments数组包含您的绘图选项，这取决于您使用的绘图类型。
addPlot("default", {type: "Areas", tension:"X"})指定轴
使用addAxis()方法指定图表轴。 图表上的addAxis()调用具有多个用于定义轴的选项。 与addPlot()类似，此调用采用两个参数：名称和选项数组。 除非在addPlot()调用中addPlot()指定了自定义名称，否则您将需要使用默认值x和y作为轴名称。
如果要创建一轴或零轴的图表，则不必定义轴。 您还可以通过添加第二个图并将轴附加到其中来制作具有两个以上轴的图表。 使用这种方法，您可以通过使用两到四个绘图在addAxis()设置leftBottom参数来显示多达四个不同的轴（两个垂直轴和两个水平轴addAxis() 。
一个轴也可以被多个图共享。 您可能有两个使用相同水平轴但垂直轴不同的图。 清单2显示了所有addPlot()选项，这些选项使这一切以及更多的可能性成为可能。
清单2. addPlot()选项
chart.addAxis("x2", {fixLower: "minor", natural: true, leftBottom: false,
stroke: "grey", majorTick: {stroke: "black", length: 4}, majorLabels: true});
chart.addAxis("y2", {vertical: true, min: 0, max: 20, leftBottom: false,
stroke: "grey", majorTick: {stroke: "black", length: 4},
minorTick: {stroke: "gray", length: 2}});
chart.addPlot("plot2", {type: "Areas", hAxis: "x2", vAxis: "y2",
animate: {duration: 1800}});启用和禁用刻度线
您可以在次要级别和微观级别打开和关闭刻度线。 您还可以打开和关闭主要和次要级别的标签。 例如，如果majorTick不为false，则您的图表将沿轴显示刻度线。
label参数类似于tick参数。 如果majorLabels等于false，则即使您已经设置标签文本，您的图表也不会显示相应刻度的标签。 请参见上面的清单2。
使用自定义轴标签
Dojo图表提供了将自定义标签分配给任何轴的功能。 确保在div中留出足够的空间以使文本正确显示。 清单3显示了如何在Columns图中使用缩写的月份名称。
清单3.在Columns图中使用缩写的月份名称
chart4.addAxis("y", {
vertical: true,
fixLower: "none",
fixUpper: "none",
natural: true,
majorTick: { length: 3 },
labels: [
{value: 0, text: ""},
{value: 1, text: "January"},
{value: 2, text: "February"},
{value: 3, text: "March"},
{value: 4, text: "April"},
{value: 5, text: "May"}
]
});系列配置
使用addSeries()可以定义将在图表上显示的数据集。 addSeries()接受三个参数：名称，数据数组和选项数组。 还有一个updateSeries()调用，用于在您要刷新数据时使用名称和数据数组。
addSeries()调用的选项为：
-
stroke涵盖了线条的颜色和宽度或条形图和柱形图的边框。 -
fill确定面积线图中线下填充区域的颜色，并确定条形图和柱形图的条形填充颜色。
如果您熟悉SVG或dojox.gfx，则可以识别stroke和fill 。
addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"},
fill: "lightpink"})数据数组有时只是数据数组。 所有绘图类型都可以接受一维数组，但是根据图表类型，还有一些其他格式选项可用。 对于线型图的一维数组，X轴将为整数（1,2,3 ...），数据将为Y轴。 对于条形图，数据是条形的长度，列或条形之间的选择决定了方向。 对于饼图，数组的总和就是您的整个饼图。 除饼图外，所有地块类型均可具有多个序列。
清单4.运行中的addSeries()
addSeries("Series A", [
{ x: 0.5, y: 5 },
{ x: 1.5, y: 1.5 },
{ x: 2, y: 9 },
{ x: 5, y: 0.3 }
]).
addSeries("Series B", [
{ x: 0.3, y: 8 },
{ x: 4, y: 6 },
{ x: 5.5, y: 2 }
]) 对于饼图，您可以指定其他信息，例如：每个切片的文本标签，切片的颜色以及覆盖在addPlot()调用中可定义的字体颜色的字体颜色。 清单5显示了一个示例。
清单5. addSeries()
chart6.addSeries("Series A", [
{y: 4, text: "Red", color: "red"},
{y: 2, text: "Green", color: "green"},
{y: 1, text: "Blue", color: "blue"},
{y: 1, text: "Other", color: "white", fontColor: "black"}
]);图表事件
Dojo图表具有自己的附加事件的方式。 connectToPlot是用于事件处理的非常有用的方法。 图表事件使您可以将行为附加到各种图表功能（例如标记），以响应用户操作。 支持以下事件：
-
onclick -
onmouseover -
onmouseout
可以将事件处理程序附加到图表的各个图上，如清单6所示。
清单6.事件处理程序可以附加到图表的各个图上
chart1.connectToPlot("default", function(args){
switch(args.type){
case "onclick":
if(args.index == 1){
var shape = args.shape;
//TODO...
}
break;
case "onmouseover":
//TODO...
break;
case "onmouseout":
//TODO...
break;
default:
//TODO...
break;
}
});缩放
Dojo图表提供了控制缩放的方法，以深入到图表的最小细节，包括滚动和平移（使用鼠标在二维中移动图表）。 请注意，浏览器可能会摇摇欲坠，但是新一代浏览器（Firefox 3，Safari 3，Opera 9.5）可以解决此问题。 Dojo图表现在还具有用于放大和缩小的动画效果，这将改善用户体验。
chart.zoomIn("x", [50, 80]);
//zoom into [50, 80] which is part of total zone [0, 100] on x axis动作和动画效果
动作是独立的对象，当用户与图表进行交互时，它们使用事件来实现某些效果。 通常，它们旨在吸引注意力并指出选择了哪个图表元素，或显示其他信息。
默认库包含以下五个操作：高亮，放大，MoveSlice，摇动和工具提示。 所有这些都利用了Dojo动画支持。
-
突出
-
当用户将鼠标悬停在某个元素上时，突出显示（通过修改填充来更改颜色）图表的各个元素；
受影响的元素包括：标记，列，条，圆和饼图。
var anim1c = new dc.action2d.Highlight(chart1, "default", { duration: 2000, easing: dojo.fx.easing.sineOut, highlight: "blue" });
放大
-
当用户将鼠标悬停在图表的单个元素上时，将其放大；
此效果始终与高光效果一起使用。
受影响的元素包括标记和圆圈。
var anim9a = new dc.action2d.Magnify(chart1, "default", { scale: 1.5 });
MoveSlice
-
从饼图中移出切片；
实际上，当用户将鼠标悬停在某个元素上时，它实际上会在切片的x和y位置上产生一些偏移。
var anim10a = new dc.action2d.MoveSlice(chart10, "default", { scale: 2, shift: 5 });
摇
-
当用户将鼠标悬停在元素上时，摇动图表元素；
受影响的元素包括：标记，列，条，圆和饼图。
var anim6b = new dc.action2d.Shake(chart6, "default"{ shiftX: 5, shiftY: 10 });
工具提示
-
显示一个工具提示，但实际上是一个dijit。
当用户将鼠标悬停在图表元素上时，它始终锚定在中间。
受影响的元素包括：标记，列，条，圆和饼图。
var anim1b = new dc.action2d.Tooltip(chart1, "default", {text: function(args){ return args.index < 2 ? "good" : "bad"; }});可以针对不同功能自定义工具提示内容。
图表小部件
使用Dojo图表的最简单方法之一就是使用Chart2D小部件。 它提供了使用dojo图表小部件的方式，与使用dojo标准小部件的方式相同。 使用dojoType = 'dojox.charting.widget.chart2D'将其嵌入HTML源代码，而不是通过编程方式创建dojo图表小部件。 清单7来自Dojo Chart2D小部件测试。
清单7. Dojo Chart2D小部件测试
<div dojoType="dojox.charting.widget.Chart2D" id="chart1"
style="width: 300px; height: 300px;">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="Areas"></div>
<div class="plot" name="grid" type="Grid"></div>
<div class="series" name="Run A" data="1, 2, 0.5, 1.5, 1, 2.8, 0.4"></div>
<div class="series" name="Run B" array="seriesB"
legend="<em>Custom</em> legend"></div>
<div class="series" name="Run C" store="tableStore" valueFn="Number(x)"></div>
</div>图表图例小部件
图表图例小部件是用于Dojo图表图例渲染的独立小部件。 您可以使用dojox.charting.widget.Legend将图例小部件添加到图表中。 图例会自动显示其所附图表的形状标记和颜色。 默认情况下，图例窗口小部件使用系列的legend参数。 如果未指定图例，它将恢复为name参数。
对于饼图，图例的行为是不同的。 如果图表是用数字数组指定的，它将使用数字。 否则，它将按以下顺序检查对象属性： legend ， text和数字值。
var legend1 = new dc.widget.Legend({chart: chart1, horizontal: true}, "legend1");Dojo Toolkit 1.5功能
本节概述了与Dojo Toolkit 1.5中的图表相关的一些新功能。
地图图
Map小部件dojox.geo.charting.Map是一个很棒的新小部件，可让您轻松地在网页上创建地图。 地图图支持包含每个地图要素详细信息的数据。 每个地图都可以分为几个特征。 例如，要素可以是基于世界地图的国家或基于国家地图的省。 您还可以为每个地图要素自定义工具提示数据。 对于每个功能，都提供了放大/缩小效果和自定义的交互式事件。
清单8显示了一个地图小部件的测试用例。
清单8.地图图小部件的测试用例
dojo.require("dojox.geo.charting.Map");
dojo.addOnLoad(function(){
var USStates = new dojox.geo.charting.Map("USStates",
"../resources/data/USStates.json");
USStates.setMarkerData("../resources/markers/USStates.json");
}); 在上面的示例中， USStates.json是地图数据源。 清单9显示了内容，包括描述详细数据的注释。
清单9.包含注释的地图图表代码
new dojox.geo.charting.Map(container, shapefile)// container// map container html node/id// shapefile// map shape data url, handle as json
shapefile data format:
{
//layerExtent: map boundary
"layerExtent":[0, 0, 8036, 5263],
//"featureNames: list of map unit, like a province in a country map
"featureNames":["RI", "VT", "HI", "ME", "VA", "MI", "DE", "ID", "IA", "MD", "MA",
"AR", "IL", "UT", "IN", "MN", "AZ", "MO", "MT", "MS", "NH", "NJ", "NM", "AK", "TX",
"AL", "NC", "ND", "NE", "NY", "GA", "NV", "TN", "CA", "OK", "OH", "WY", "FL", "SD",
"SC", "CT", "WV", "DC", "WI", "KY", "KS", "OR", "LA", "WA", "CO", "PA"],
//features: map unit shape info
"features":{
"RI":{
//unit shape vertex described in polygon: [[polygon1_vertex1_x,
polygon1_vertex1_y, p_v2_x, p_v2_y, ...], [p2_v1_x, p2_v1_y, ...], ....]
"shape":[[7641, 1436, 7651, 1437, 7661, 1467, 7661, 1467, 7653, 1478, 7641,
1436], [7541, 1398, 7559, 1392, 7598, 1380, 7615, 1420, 7635, 1430, 7635, 1431, 7627,
1445, 7626, 1427, 7615, 1429, 7607, 1410, 7618, 1435, 7606, 1444, 7617, 1460, 7618,
1506, 7612, 1496, 7568, 1527, 7568, 1526, 7541, 1398], [7633, 1474, 7639, 1442, 7645,
1476, 7631, 1485, 7633, 1474]],
//center: center point
"center":[7585, 1442],
//shape's rectangle boundary
"bbox":[7541, 1380, 120, 147]
},
"VT":{
"shape":[7427, 828, 7434, 848, 7424, 882, 7445, 909, 7444, 926, 7390, 984, 7404,
1022, 7383, 1128, 7402, 1236, 7394, 1266, 7414, 1289, 7393, 1294, 7309, 1313, 7302,
1314, 7267, 1166, 7255, 1151, 7239, 1162, 7241, 1126, 7216, 1076, 7218, 999, 7196,
969, 7184, 893, 7202, 888, 7427, 828],
"center":[7317, 1057],
"bbox":[7184, 828, 261, 487]
},
.......
}
}将在网页上显示的地图如图7所示。
图7.简单地图
渐变和图案
新的Dojox图表渐变功能为您的图表提供了不错的渐变填充效果。 可以在图表主题中自定义渐变功能。 梯度特征基于图和形状。 它还提供线性和径向渐变样式。
图8显示了不同的渐变效果。
图8a。 线性和径向渐变
图8b。 线性和径向渐变（续）
图8c。 线性和径向渐变（续）
图8中的第一个图表是每种形状上的渐变。 中间的图表是绘图上的渐变。 它们都是线性渐变。 图8中的最后一个图表是径向渐变。 清单10显示了此示例的代码。
清单10.渐变效果的代码
var theme1 = new dojox.charting.Theme({
seriesThemes: [
{
fill: {
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
colors: [{ offset: 0, color: "white" }, { offset: 1, color: "red" }]
}
},
{
fill: {
type: "linear", space: "plot", x1: 0, y1: 100, x2: 100, y2: 0,
colors: [{ offset: 0, color: "white" }, { offset: 1, color: "blue" }]
}
},
{
fill: {
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
colors: [{ offset: 0, color: "white" }, { offset: 1, color: "green" }]
}
}
]
});
var chart1 = new dojox.charting.Chart2D("c1").
setTheme(theme1).
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true}).
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major",
includeZero: true, minorTickStep: 0.5}).
addPlot("default", {type: "Columns"}).
addSeries("Series A", [1, 2, 3, 4, 5]).
addSeries("Series B", [5, 4, 3, 2, 1]).
render(); 您会看到渐变都是在theme1自定义的。 fill参数类型可以是linear或radial ，空间可以是plot或shape ，依此类推。 清单11显示了详细信息。
清单11.使用fill参数的渐变效果
seriesThemes: [
{
fill: {
// summary: fill for plot1// type: string:// gradient fill type e.g. “linear”, “radial”// space: string:// gradient fill area e.g. “plot”, “shape”, “shapeX”// x1: Number: // gradient fill start point offset percentage(0-100) for x Axes// x2: Number: // gradient fill end point offset percentage(0-100) for x Axes// y1: Number: // gradient fill start point offset percentage(0-100) for y Axes// y2: Number: // gradient fill end point offset percentage(0-100) for y Axes// colors: Array// gradient fill settings
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
colors: [{ offset: 0, color: "white" }, { offset: 1, color: "red" }]
}
},
{
fill: {
type: "linear", space: "plot", x1: 0, y1: 100, x2: 100, y2: 0,
colors: [{ offset: 0, color: "white" }, { offset: 1, color: "blue" }]
}
},
{
fill: {
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
colors: [{ offset: 0, color: "white" }, { offset: 1, color: "green" }]
}
}
]自定义样式的方式与自定义渐变的方式相同。
使用为渐变提供的API，您可以自定义许多看起来很棒的复杂渐变效果。 图9在条形图上显示了复杂的渐变效果。
图9.带有条形图的渐变
摘要
本文提供了Dojo可视化库中所有主要图表类型的概述。 您了解了流行图表的基本用法，包括图表，坐标轴和序列。 本文探讨了缩放，动作和动画效果。 您还了解了一些新的Dojo 1.5映射和图表功能。
翻译自: https://www.ibm.com/developerworks/web/library/wa-dojocharts/index.html
dojo 图形显示
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
