Question

我正在使用图表的 jqplot 插件。我创建了折线图，但我想创建下图中显示的目标线。我没有找到绘制那条线的选项。

enter image description here

绘制该行的任何选项？感谢。

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。：不要忘记包含canvas-overlay插件（external link here - 或在您的来源中： jqplot / dist / plugins / 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"
        }
      }
    });
});

折线图中的目标线

2 个答案: