dojo - 如何在 dojo 柱形图上叠加一条线

Question

我正在使用 dojo 柱形图。我想添加一条绘制在绘图上的自定义线(某种阈值线)。所以，假设 y 轴的范围从 0 到 5。我想要一条水平线，比方说，4.2 横跨绘图。它是一个柱形图。我希望找到一些可以帮助我在地 block 上进行自定义绘图的绘图 API，但我无法弄清楚如何。我知道图表使用 gfx 和表面，所以如果我可以获得图表/绘图表面的句柄，也许我可以绘制一条自定义线？还需要数据到渲染坐标映射才能实现这一点

我当前的图表使用如下代码:

var mychart = new dojox.charting.Chart2D("columns").
        addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true,
                            font: "normal normal 10pt Arial", 
                             labels: [{value: 1, text: "Q2 FY11"},
                                      {value: 2, text: "Q3 FY11"},
                                    {value: 3, text: "Q4 FY11"},
                                    {value: 4, text: "Q1 FY12"}]
                            }).
        addAxis("y", {vertical: true, includeZero: false, fixLower: "major", fixUpper: "major", min: 0, max: 5, font: "normal normal 10pt Arial", majorTick: {color: "black", length: 6}, minorTicks: false}).
        addPlot("default", {type: "ClusteredColumns", tension: "S", shadows: {dx: 2, dy: 2}, gap: 5, minBarSize : 14, maxBarSize:24, animate:  { duration: 1000, easing: dojo.fx.easing.linear} }).
        addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]).
        addSeries("Series B", [1.2, 2.5]);

Answer 1

您可以使用另一个绘图来渲染线条。

new dojox.charting.Chart2D("columns").
    addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true,
                        font: "normal normal 10pt Arial", 
                         labels: [{value: 1, text: "Q2 FY11"},
                                  {value: 2, text: "Q3 FY11"},
                                {value: 3, text: "Q4 FY11"},
                                {value: 4, text: "Q1 FY12"}]
                        }).
    addAxis("y", {vertical: true, includeZero: false, fixLower: "major", fixUpper: "major", min: 0, max: 5, font: "normal normal 10pt Arial", majorTick: {color: "black", length: 6}, minorTicks: false}).
    addPlot("default", {type: "ClusteredColumns", tension: "S", shadows: {dx: 2, dy: 2}, gap: 5, minBarSize : 14, maxBarSize:24, animate:  { duration: 1000, easing: dojo.fx.easing.linear} }).
    addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]).
    addSeries("Series B", [1.2, 2.5]).
    addPlot("threshold", { type: "Lines" }).
    addSeries("threshold", [{x: 0, y: 4.2}, {x: 4, y: 4.2}], { plot: "threshold" }).
    render();