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