jquery - 折线图中的目标线

Question

我正在为图表使用jqplot插件。我已经创建了折线图，但我想创建与下图相同的目标线。我没有找到画那条线的选项。

有什么办法可以画出那条线？谢谢。

Answer 1

您可以使用 canvasOverlay 插件绘制类似的线条。请参阅此处的示例和此处的文档。您必须修改以下代码：

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

});

PS：不要忘记包含 canvas-overlay 插件（此处为外部链接- 或在您的来源中：jqplot/dist/plugins/jqplot.canvasOverlay.js）

Answer 2

看到这个

演示

这是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"
        }
      }
    });
});