jquery - canvasOverlay によって動的に JQPlot の horizo​​ntalLine と verticalLine

Question

私は、JQplot for Bus Time Table を使用して動的に勾配とフラット チャートを開発中です。私の要件によると、プロットされたチャートとは別に、グラフにいくつかの点線をプロットしたいと考えています。このために、水平線、垂直線、およびcanvasOverlayの線を静的に使用しています。これらの線を動的に描画したい。行数と必要なすべてのポイントは、それぞれ xml ファイル自体から取得されます。私の理解によると、canvasOverlayは、いくつかのプロパティを持つ配列オブジェクトとして horizo​​ntalLine、verticalLine、および line を使用しています。これらのオブジェクトを動的に作成された配列から渡したいのですが、これらの行を実現できません。私のクエリに対する解決策は高く評価されています。

Answer 1

これは、線を引く方法を説明するためのフィドルcanvasOverlayです：

$.jqplot.tickNumberFormatter = function(format, val) {
  if (typeof val == 'number') {
    if (val == "3.0") {
      return String("High");
    } else if (val == "2.0") {
      return String("Medium");
    } else if (val == "1.0") {
      return String("Low");
    } else return String(" ");
  } else {
    return String(val);
  }
};


BuildReadinessGraph();


function BuildReadinessGraph() {

  var grid = {
    gridLineWidth: 1.5,
    gridLineColor: 'rgb(235,235,235)',
    drawGridlines: true
  };
  var data = [
    ['2012-09-13', 1],
    ['2012-10-22', 2],
    ['2012-01-12', 3]
  ];

  $.jqplot.postDrawHooks.push(function() {
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back  
    $(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front         
    $(".jqplot-highlighter-tooltip").css('z-index', '2');
    $(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
  });

  $.jqplot('ChartDIV', [data], {
    series: [{
      showMarker: true
    }],
    seriesDefaults: {
      showMarker: true,
      pointLabels: {
        show: true
      }
    },
    grid: grid,
    highlighter: {
      sizeAdjust: 10,
      show: true,
      tooltipLocation: 'n',
      useAxesFormatters: true
    },

    tickOptions: {
      formatString: '%d'
    },
    canvasOverlay: {
      show: true,
      objects: [{
          line: {
            start: [new Date('2012-05-01').getTime(), 0],
            stop: [new Date('2012-05-10').getTime(), 0],
            lineWidth: 1000,
            color: 'rgba(255, 0, 0,0.45)',
            shadow: false,
            lineCap: 'butt'
          }
        }

      ]
    },
    axes: {
      xaxis: {
        label: 'Dates',
        renderer: $.jqplot.DateAxisRenderer,
        rendererOptions: {
          tickRenderer: $.jqplot.CanvasAxisTickRenderer
        },
        tickOptions: {
          formatString: '%d/%m/%Y',
          angle: -30,
          fontFamily: 'Arial',
          fontSize: '13px',
          fontWeight: 'bold'
        },
        min: "01-01-2012",
        tickInterval: '2 month',
        labelOptions: {
          fontFamily: 'Arial',
          fontSize: '14pt',
          fontWeight: 'bold',
          textColor: '#0070A3'
        }
      },
      yaxis: {
        label: 'Levels',
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
        tickOptions: {
          formatter: $.jqplot.tickNumberFormatter // my formatter
        },
        rendererOptions: {
          tickRenderer: $.jqplot.CanvasAxisTickRenderer
        },
        labelOptions: {
          fontFamily: 'Arial',
          fontSize: '14pt',
          fontWeight: 'bold',
          textColor: '#0070A3',
          angle: -90
        }

      }
    }
  });


};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasOverlay.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.highlighter.js"></script>

<div id="ChartDIV"> </div>

「ライン」作成の興味深いコードで：

  grid:                 
            {
                drawGridLines: true,        // whether to draw lines across the grid or not.
                gridLineColor: '#cccccc',   // Color of the grid lines.
                backgroundColor: "#eee",
                borderColor: '#999999',     // CSS color spec for border around grid.
                borderWidth: 2.0,           // pixel width of border around grid.
                shadow: true,               // draw a shadow for grid.
                shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
                shadowOffset: 1.5,          // offset from the line of the shadow.
                shadowWidth: 3,             // width of the stroke for the shadow.
                shadowDepth: 3,             // Number of strokes to make when drawing shadow.
                                            // Each stroke offset by shadowOffset from the last.
                shadowAlpha: 0.07,          // Opacity of the shadow
            },
            canvasOverlay: {
                show: true,
                objects:

                        [
                            {
                                line:
                                {
                                    start : [new Date('2012-01-12').getTime(),20],                                                
                                    stop : [new Date('2012-01-13').getTime(),20],                                                
                                    lineWidth: 1000,
                                    color: 'rgba(255, 0, 0,0.45)',
                                    shadow: false,
                                    lineCap : 'butt'
                                }
                            },                                    
                            {
                                line:
                                {
                                    start : [new Date('2012-01-13').getTime(),20],                                                
                                    stop : [new Date('2012-01-14').getTime(),20],                                                
                                    lineWidth: 1000,
                                    color: 'rgba(255, 0, 0,0.45)',
                                    shadow: false,
                                    lineCap : 'butt'
                                }
                            }
                        ]
            } 

アイデアは、「線」セクションを追加し、plot.replot();メソッドを呼び出してグラフを再描画することです。次のように、ラインポイントを配列に入力できます。

var myArrayPoints = Array();

var myArrayPoints.push({     line:
                                {
                                    start : [new Date('2012-01-12').getTime(),20],                                                
                                    stop : [new Date('2012-01-13').getTime(),20],                                                
                                    lineWidth: 1000,
                                    color: 'rgba(255, 0, 0,0.45)',
                                    shadow: false,
                                    lineCap : 'butt'
                                }
                            });

//Used in JQPlot like that
canvasOverlay: {
                show: true,
                    objects: [ myArrayPoints ]
               }