2009-03-28 5 views
0

dojox.chartingに基づくいくつかのクライアントサイドJSコードを持つWeb HTMLページがあります。自分のローカルWebサイトにdojoライブラリはありません(実際にはWebサーバーはありません)。ここでdojox.chartingとxDomainに関する問題dojo/dojoxライブラリへの参照

<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でコードに基づいて、次のとおりです。私はこのようなGoogleのホスティングサイトにSRCとの道場xDomain参照機能を使用します。

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軸に沿った数字のみ1~9が表示されない0から10のすべての中間の数字が表示されていることです。 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 

私はそれらの未定義エラーが、私は私の頭の部分にいくつかのdojoxライブラリファイルをロード欠場示すかもしれないと思います。

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

答えて

0

、私も(0〜9)、それらを表示するための簡単な方法を見つける:

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

また、唯一の分をコメントアウトし、10(0、1で最大を残すことができます。 ..〜10)。軸設定の詳細については、DojoCampus.orgを参照してください。

0

:)Mangify(によって設定されたアニメーションの一部、上記参照私はHTMLの頭のsetctionに次の行を追加すると

dojo.require("dojo.fx"); 

が働いています。これは、dojox.chartingライブラリのdojoxへのxDomain参照を設定した場合のみです。

私が見つけたのは、Firebugを使ってDojoToolKit's Event 2D web pageを見ることです。ヘッドセクションには次のコードがあります。

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

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

おもしろいことに、<スクリプトsrc = ".." >は、jsがxDomainで参照されている場合、jsソースコードが1つの長い長い時間に部分的に表示されます。あなたのウェブページ、つまり同じドメインにインストールされたdojoライブラリがあれば、dojoのソースコードはうまく表示されます。 y軸の値について