折线图中的目标线

Question

我正在使用jqplot图表插件。我已经创建了折线图，但是我想创建与下图中显示的目标线相同的线。我没有找到选择该线的选项。

任何选项来绘制线？谢谢。

Answer 1

您可以使用canvasOverlay插件绘制类似的线。 请参阅示例here和文档here。你必须适应下面的代码：

plot1 = $.jqplot('chart1', [s1], { 
    series:[{...}], 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     } 
    }, 
    grid: grid, 
    canvasOverlay: { 
     show: true, 
     objects: [ 
      {horizontalLine: { 
       name: 'targetLine', 
       y: 1000000, //put here y-value where you want to draw your target line** 
       lineWidth: 3, 
       xOffset: 0, 
       color: 'rgb(89, 198, 154)', 
       shadow: false 
      }} 
     ] 
    } 
}); 

}）;

P.S. ：不要忘了，包括帆布覆盖的插件（external link here - 或你的源代码：jqplot /距离/插件/ jqplot.canvasOverlay.js）

Answer 2

看到这个

DEMO

这里是jQuery代码

$(document).ready(function(){ 
    var target=6; 
    var data1=[3,7,9,1,5,3,8,2,5]; 
    var data2=[1,2,3,1,3,5,4,3,1]; 
    var data3=[2,3,3,6,5,4,5,1,1]; 
    var targetData=new Array(); 
    for(i=0;i<data1.length;i++) 
    { 
     targetData.push(target); 
    } 

    var plot2 = $.jqplot ('chart2', [data1,data2,data3,targetData], { 
     // Give the plot a title. 
     title: 'Plot With Options', 
     // You can specify options for all axes on the plot at once with 
     // the axesDefaults object. Here, we're using a canvas renderer 
     // to draw the axis label which allows rotated text. 
     axesDefaults: { 
     labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
     }, 
     // Likewise, seriesDefaults specifies default options for all 
     // series in a plot. Options specified in seriesDefaults or 
     // axesDefaults can be overridden by individual series or 
     // axes options. 
     // Here we turn on smoothing for the line. 
     seriesDefaults: { 
      rendererOptions: { 
       smooth: true 
      } 
     }, 
     // An axes object holds options for all axes. 
     // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ... 
     // Up to 9 y axes are supported. 
     axes: { 
     // options for each axis are specified in seperate option objects. 
     xaxis: { 
      label: "X Axis", 
      // Turn off "padding". This will allow data point to lie on the 
      // edges of the grid. Default padding is 1.2 and will keep all 
      // points inside the bounds of the grid. 
      pad: 0 
     }, 
     yaxis: { 
      label: "Y Axis" 
     } 
     } 
    }); 
});