Question

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

有人有经验吗？或者可以告诉我如何选择/调用以获取图表中的行？

实施例代码：

$(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

将其添加到现有代码中可以帮助您绘制垂直线。

CODE：

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

您可以设置＆＃39; x＆＃39;达到您想要的期望值。

IMP：为了让canvasOverlay起作用，您必须包含jqplot.canvasOverlay.min.js文件，否则它将无效。

这是一个工作小提琴：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在图中绘制垂直线

1 个答案: