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

});
4

2 に答える 2

4

これを解決するには、タイプcolumnのプロットをチャートに追加し、独自の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ドキュメントで列の幅/色/塗りつぶしを変更する方法を調べることができます。

于 2011-10-11T14:03:18.137 に答える