2011-09-16 32 views
1

我有一個工作圖,按周銷售圖。我想爲代表當前周的圖表添加一條垂直線,但我無法弄清楚如何去做。添加一條線(不是一個系列)到一個道場圖

我圖的設置是相當香草:

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

我解決了這個加入類型列的陰謀圖表,用它自己的Y軸是從0到1:

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值的確切數額爲您的數據的數據系列:

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]; 

你會在更改0到1無論哪個索引都對應您想要的行。

然後我說這個系列到劇情:

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 
    }); 

問候, 克里斯托夫

相關問題