0

我有一个网页 HTML 页面，其中包含一些基于 dojox.charting 的客户端 JS 代码。我的本地网站中没有 dojo 库（实际上没有 Web 服务器）。我将 dojos 的 xDomain 参考功能与 src 一起用于 google 的托管站点，如下所示：

<head>
...
<script type="text/javascript"
    djConfig1="isDebug:true"        
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js">
</script>
<script type="text/javascript"
  dojo.require("dojox.gfx");
    dojo.require("dojox.gfx.move");
    dojo.require("dojo.html");

    dojo.require("dojox.charting.Chart2D");
    dojo.require("dojox.charting.themes.PlotKit.green");

    dojo.require("dojox.charting.action2d.Highlight");
    dojo.require("dojox.charting.action2d.Magnify");
    dojo.require("dojox.charting.action2d.MoveSlice");
    dojo.require("dojox.charting.action2d.Shake");
    dojo.require("dojox.charting.action2d.Tooltip");
    dojo.require("dojox.charting.themes.MiamiNice");

    dojo.require("dojox.charting.widget.Legend");
</script>
....
</head>

这是创建曲线图的功能，基于Dojo 中的代码：Now With Drawing Tools。

function drawCurve(nodeChart, nodeLegend) {
  var chart1 = new dc.Chart2D(nodeChart)
    .setTheme(dc.themes.PlotKit.green)
    .addPlot("default", {
      type: "Default",
      lines: true,
      markers: true,
      tension: 2
    })
   .addAxis("x", {
      min: 0,
      max: 6,
      majorTick: { stroke: "black", length: 3 },
      minorTick: { stroke: "gray", length: 3 }
    })
    .addAxis("y", {
      vertical: true,
      min: 0,
      max: 10,
      fixLower: "major", 
      fixUpper: "major",
      majorTick: { stroke: "black", length: 3 },
      minorTick: { stroke: "gray", length: 3 }
    })
    .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, tooltip: "Custom tooltip"},
      { x: 5.5, y: 2 }
    ]);
  var series = chart1.series;

  var anim_a = new dc.action2d.Tooltip(chart1, "default");
  var anim_c = new dc.action2d.Magnify(chart1, "default"); // not working
  chart1.render();

  var legendChart = new dc.widget.Legend(
    {chart: chart1, horizontal: false}, nodeLegend.id);
}

我的第一个问题是，对于曲线图，y 轴上的数字只显示 0 和 10。中间的数字 1 到 9 都没有显示。从 1 到 6 的 x 轴值是可见的。文章中的原始图表快照也显示了 y 轴值，但DojoToolKit Demos上的快照确实显示了沿 y 轴的值。我不确定我在代码中遗漏了什么。如何启用显示 y 轴值？

下一个问题是关于 Magnify()。DojoToolKit 演示站点的曲线图工作正常，但我的图表的放大功能不起作用。我认为这可能是由 xDomain 引用引起的。我可能需要从 xDomain 的 dojox 库中指定一些指定的 js 文件。我不确定我必须指定哪一个。

我注意到的一件事是，我的 FireBug 在绘制曲线图后显示以下错误：

_4.fx.combine is not a function http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8
_11.action is undefined http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8

我认为那些未定义的错误可能表明我错过了在我的 head 部分加载一些 dojox 库文件。

顺便说一句，我没有网络服务器，我更喜欢使用 dojo 的 xDomain 参考选项。这样，我可以在任何地方编辑一个html文件，然后发送给其他人。无需下载和安装 dojo 源库。

4

2 回答 2

0

我想我得到了缺失的部分：

dojo.require("dojo.fx");

当我将这一行添加到我的 HTML 的 head setction 中时，Mangify() 设置的动画部分正在工作。这仅适用于您为 dojox.charting 库设置 xDomain 对 dojox 的引用的情况。

我发现这是通过使用 Firebug 查看DojoToolKit 的 Event 2D 网页。在头部有代码：

<script src="http://../action2/Magnify.js" type="text/javascript"></script>

该页面已启用调试。因此，在 FireBug 窗口中，您将看到布局良好的 js 源代码。我看到了三个要求，一个是“dojo.fx”。我试图添加这个。然后没有更多的错误，当我将鼠标移到图表曲线中的点上时，我可以看到放大效果的动画。

<script src=".."> 有趣的一点是，如果 js 是 xDomain 引用的，那么 js 源代码会在很长一段时间内部分显示。如果您的网页上安装了dojo 库，即同一个域，则dojo 的源代码可以很好地显示。

于 2009-03-29T03:58:58.113 回答
0

关于 y 轴值，我还找到了显示它们的简单方法（0 到 9）：

.addAxis("y", {
  vertical: true,
  //min: 0
  //max: 10
....

您也可以仅注释掉 min 并将 max 保留为 10（0、1、... 到 10）。有关轴设置的更多详细信息，请参见DojoCampus.org。

于 2009-03-29T05:42:42.170 回答