将一条线（不是一系列）添加到 dojo 图表

Question

我有一个按周绘制销售图表的工作图表。我想在图表中添加一条代表本周的垂直线，但我不知道该怎么做。

我的图表设置非常普通：

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

});

Answer 1

我通过在图表中添加一个列类型的图来解决这个问题，它自己的 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 文档中查找如何更改列的宽度/颜色/填充。

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

问候，
克里斯托夫