jqplot 在图中绘制垂直线

Question

我的程序正在使用来自 jqplot 页面的以下（可比较的）源代码绘制图表。目标是在图中的位置 x 处绘制一条垂直线。我在 jqplot 页面上按照指南示例进行了跟进，但它没有画线，只是画了图。

有人对此有经验吗？或者可以告诉我 options/calls 应该如何得到图中的线？

示例代码：

$(document).ready(function(){
  var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
      // 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
      },
      // 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"
        }
      }
    });
});

Answer 1

将此添加到您现有的代码中应该可以帮助您绘制一条垂直线。

代码：

canvasOverlay: {
   show: true,
   objects: [
       {verticalLine: {
           name: 'stack-overflow',
           x: 4, // x-axis position where you want to draw the vertical line.
           lineWidth: 6,
           color: 'rgb(100, 55, 124)',
           shadow: false
       }}
    ]
}

您可以将 'x' 设置为您选择的所需值。

IMP：为了使 canvasOverlay 正常工作，您必须包含 jqplot.canvasOverlay.min.js 文件，否则将无法正常工作。

这是一个有效的 fiddle：jqPlot - Draw vertical line on the graph

我在上面的代码中包含了以下文件 (JS Fiddle)。您还可以参考 JSFiddle.

中左侧窗格中的外部资源部分

jquery.jqplot.min.js
jquery.jqplot.min.css
jqplot.canvasOverlay.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.canvasTextRenderer.min.js

jqPlot 示例在这里 - jqPlot Canvas Overlay

希望对您有所帮助:-)

jqplot 在图中绘制垂直线

jqplot draw vertical line in graph

javascript

jqplot