如何覆盖dojo柱形图上的一条线

Question

我正在使用dojo柱形图。我想添加一个自定义线（某种阈值线），绘制在图上。 所以，让我们说y轴的范围是从0到5.我想要一条水平线，可以说，4.2在整个绘图上运行。 这是一个柱状图。 我希望找到一些绘图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(); 

Answer 2

表示MAX_TEMPERATURE作为在同一图表中线条和MIN_TEMPERATURE作为列的另一简单示例：

var chart = new Chart("chartNode"); 

chart.addPlot("tempMaxPlot", { 
    type: "Lines", 
    markers: false 
}); 

chart.addPlot("tempMinPlot", { 
    type: "Columns", 
    markers: true, 
    gap: 5 
}); 

chart.addAxis("x"); 
chart.addAxis("y", { min: -3, max: 13, vertical: true, fixLower: "minor", fixUpper: "major" }); 

var chartData_tmax = [11,13,12,11,10,9,9,10]; 
chart.addSeries("tmax",chartData_tmax, { plot: "tempMaxPlot" }); 

var chartData_tmin = [1,1,2,1,0,-1,-1,0]; 
chart.addSeries("tmin",chartData_tmin, { plot: "tempMinPlot" }); 

chart.render(); 

Answer 3

最后但并非最不重要的，你可以GFX绘图函数手动绘制一条线，如下所述：

Add a line (not a series) to a dojo chart