꺾은 선형 차트의 대상 라인

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. : 캔버스 오버레이 플러그인을 포함하는 것을 잊지 마십시오 (external link here - 또는 소스에을 : jqplot/DIST/플러그인/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" 
     } 
     } 
    }); 
});