2011-09-16 9 views
1

週ごとにグラフを表示する作業チャートがあります。私は現在の週を表す縦線をグラフに追加したいが、それを行う方法を理解することはできない。dojoの図表に行(シリーズではありません)を追加します

私のチャートのセットアップはかなりバニラです:

dojo.ready(function(){ 
var chart = new dojox.charting.Chart2D("saleschart"); 
chart.setTheme(dojox.charting.themes.Claro); 

chart.addPlot(
    "default", 
    { 
     type: "Lines", 
     markers: true, 
     shadows: {dx: 2, dy: 2} 
    }); 

chart.addAxis("x", {title: "Week", majorTickStep: 2}); 

chart.addAxis("y", { title: "Sales ($)", vertical: true, fixLower: "major", fixUpper: "major", majorTickStep: 100 }); 

chart.addSeries("2009",[{x:36, y:512.65},{x:37, y:195.5},{x:38, y:388.15},{x:39, y:601.3},{x:40, y:178.55},{x:41, y:298.15},{x:42, y:98.7},{x:43, y:187.55},{x:44, y:241.3},{x:45, y:251.35},{x:46, y:69.8},{x:47, y:174.55},{x:48, y:74.7},{x:49, y:379.2},{x:50, y:375.95},],{plot: "default"});chart.addSeries("2010",[{x:2, y:18.95},{x:3, y:174.7},{x:4, y:113.65},{x:5, y:258.4},{x:6, y:666.35},{x:7, y:941.5},{x:8, y:192.6},{x:9, y:233.25},{x:10, y:283.25},{x:11, y:122.7},{x:12, y:279.4},{x:13, y:129.65},{x:14, y:32.9},{x:15, y:162.7},{x:16, y:160.65},{x:17, y:297.25},{x:18, y:361.1},{x:19, y:270.1},{x:20, y:37.85},{x:32, y:38.95},{x:35, y:434.9},{x:36, y:416.15},{x:37, y:443.95},{x:38, y:423},{x:39, y:176.5},{x:40, y:240.55},{x:41, y:174.55},{x:42, y:195.55},{x:43, y:230.5},{x:44, y:373.95},{x:45, y:184.5},{x:46, y:261.3},{x:47, y:165.55},{x:49, y:471.95},{x:50, y:328.1},{x:51, y:168.65},],{plot: "default"});chart.addSeries("2011",[{x:4, y:218.45},{x:5, y:357.3},{x:6, y:459.95},{x:7, y:1200.7},{x:8, y:257.3},{x:9, y:149.65},{x:10, y:190.6},{x:11, y:259.45},{x:12, y:130.65},{x:13, y:277.4},{x:14, y:85.75},{x:16, y:428.1},{x:17, y:428.9},{x:18, y:282.35},{x:19, y:308.35},{x:20, y:20.95},{x:35, y:174.75},{x:36, y:1008.45},{x:37, y:619.15},{x:38, y:394.2},],{plot: "default"}); 

var tip = new dojox.charting.action2d.Tooltip(chart,"default"); 

var mag = new dojox.charting.action2d.Magnify(chart,"default"); 

new dojox.charting.action2d.Highlight(chart,"default"); 

chart.render(); 

var selectableLegend = new dojox.charting.widget.SelectableLegend({chart: chart},"selectableLegend"); 

}); 
+0

だけ明確にする、私のチャートが正常に機能しています。私が知りたいのは、x軸の値に基づいてプレゼンテーションの目的で行を追加する方法だけです。 –

答えて

3

私は0から1になり、それ自身のy軸に、チャートにタイプ列のプロットを追加することによって、これを解決:

chart.addAxis("y2", { 
      vertical: true, 
      fontColor: "#708291", 
      min: 0, 
      max: 1.0, 
      minorTicks: true, 
      minorLabels: true, 
      microTicks: true,     
      leftBottom: false     
      });    
chart.addPlot("verticalLine", {type: "Columns", gap: 1, minBarSize: 1, maxBarSize: 1, vAxis:"y2"}); 

そして、あなたはあなたのデータとしてxの値の正確な量を持っているデータ系列必要があります:あなたはときに1に0を変更します

var verticalLineData = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; 

をどのインデックスが線になるかに対応しています。

は、それから私は、そのプロットにこのシリーズを追加しました:

chart.addSeries("verticalLine", verticalLineData, {plot: "verticalLine"}); 

前にそれを持参し、レンダリング:

chart.movePlotToFront("verticalLine"); 
chart.render(); 

あなたが記入さ/幅/色を変更する方法を調べることができますdojoドキュメントの列。

+0

ありがとうございました。それが助けになると確信しています! –

+0

大歓迎です! – rav

2

dojox.chartingはdojo gfxを使用しているため、チャートの内部には、レンダリング後のグラフオブジェクトを描画できます。例えば。次の例では、グラフの中に縦線を描きます。

chart.surface.createLine(
    { 
     x1: 100, 
     y1: chart.offsets.t, 
     x2: 100, 
     y2: chart.getCoords().h - chart.offsets.t - chart.offsets.b 
    }); 

よろしく、 クリストフ

関連する問題