一个用户触手可及的 XPages Web 图表控件（4）

look_w

在 XPages 中应用 Dojo 图表在 XPages 页面中，Dojo 对象通过客户端的 Javascript 函数实现动态绑定。
首先，在 XPages 页面中定义一个 DIV 标签，并指定 DIV 的 id，然后使用客户端 Javascript 在页面加载时通过对象 id 实现动态绑定，下例将一个 dojox.charting.Chart2D 对象绑定到了一个 DIV 对象上。为了在 XPages 中使用 Dojo 元素，需要先将用到的 Dojo 对象包引入到 Xpages 页面中。
代码 3. 绑定 Dojo 对象

1 2 3 4 5

XPage 页面 <div id="piechart" style="width: 250px; height: 250px;" ></div> 客户端 Javascript var chart1 = new dojox.charting.Chart2D("piechart");

细心的读者可能发现了在上面的两个例子中，我们都直接使用了 HTML 的 <DIV> 标签，而没有使用 XPages 中的 <XP IV> 标签。这并不是个随意的选择。如果我们使用 <XP IV> 标签的话，XPages 引擎将会把它的 id 属性值解析成类似 view:_id1:_id2:piechart 的形式，这样在动态绑定阶段 Dojo 将因为无法找到 id 为 piechart 的对象而绑定失败。有兴趣的用户可以自己尝试一下这两种情况的结果，加深对 XPages 中 HTML 标签和 XPages 标签的理解。所以，当在 XPages 页面中加入 Dojo 对象时，请务必使用 HTML 标签。
除了绑定 Dojo 对象的代码，在客户端的 Javascript 中，用户也需要为 Dojo 图表定义它的显示属性，或者为它添加主题（如图 4，当鼠标悬浮在一个扇区上的时候，就浮动显示它的百分比），以下代码定义了一个如图 4 的饼图。与 Dojo 对象的引用一样，使用 Dojo 主题时，也需要先将用到的包引入到 XPages 页面中。
代码 4. 客户端 Javascript 代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14

makePieChart = function(piechartData){    var chart1 = new dojox.charting.Chart2D("piechart");    chart1.setTheme(dojox.charting.themes.MiamiNice).addPlot("default", {        type: "ie",        font: "normal normal 11pt Tahoma",        fontColor: "black",        labelOffset: -30,        radius: 80    }).addSeries("ieSeries", piechartData);    var anim_a = new dojox.charting.action2d.MoveSlice(chart1, "default");    var anim_b = new dojox.charting.action2d.Highlight(chart1, "default");    var anim_c = new dojox.charting.action2d.Tooltip(chart1, "default");    chart1.render(); };

如果用户还希望为图表添加自己定义的 CSS，或者为图表添加响应事件的处理函数，可以将 CSS 和 Javascript 添加到数据库中。这些数据将会连同引用的 Dojo 包一同被发送到 Web 客户端，也就是图 2 中数据线路（2）（3）。