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