javascript - dojox.charting および xDomain の dojo/dojox ライブラリーへの参照に関する問題

Question

dojox.charting に基づくクライアント側の JS コードを含む Web HTML ページがあります。私のローカル Web サイトには Dojo ライブラリーがありません (実際には Web サーバーはありません)。次のように、Google のホスティングサイトへの src を使用して dojos の xDomain 参照機能を使用します。

<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 ファイルを指定する必要がある場合があります。どちらを指定する必要があるかわかりません。

私が気づいたことの 1 つは、曲線グラフが描画された後に 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 ライブラリファイルをロードしていないことを示している可能性があると思います。

ところで、私は Web サーバーを持っていないので、Dojo の xDomain 参照オプションを使用することを好みます。このようにして、任意の場所で html ファイルを編集し、他の人に送信することができます。Dojo ソース・ライブラリーをダウンロードしてインストールする必要はありません。

score 0 · Accepted Answer

y 軸の値に関しては、それらを表示する簡単な方法 (0 から 9) も見つけました。

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

min のみをコメントアウトして、max を 10 (0、1、... から 10) のままにすることもできます。軸設定の詳細については、 DojoCampus.orgを参照してください。

score 0 · Accepted Answer

不足している部分があると思います：

dojo.require("dojo.fx");

上記の HTML の head setction にこの行を追加すると、Mangify() によって設定されたアニメーション部分が機能します。これは、dojox.charting ライブラリーの dojox への xDomain 参照を設定した場合のみです。

私がこれを見つけたのは、Firebug を使用してDojoToolKit の Event 2D Web ページを調べたときです。head セクションには次のコードがあります。

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

そのページではデバッグが有効になっています。その結果、FireBug ウィンドウでは、js のソースコードが見栄えのよいレイアウトで表示されます。要件は 3 つあり、そのうちの 1 つは「dojo.fx」用です。これを追加しようとしました。その後、エラーはなくなり、グラフの曲線のポイントにマウスを移動すると、拡大効果のアニメーションが表示されます。

javascript - dojox.charting および xDomain の dojo/dojox ライブラリーへの参照に関する問題

2 に答える 2

Related

Reference