在 jqplot 图表中绘制 x ax 具有日期格式的垂直线

Posted 2023-02-23

【中文标题】在 jqplot 图表中绘制 x ax 具有日期格式的垂直线

【英文标题】：Draw vertical lines in jqplot chart which x axe has Date format

【发布时间】：2014-07-15 01:05:42

【问题描述】：

我有一个带有 X 轴的 jqPlot 图表，格式如下：

xaxis: 
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: 
                          formatString: '%Y-%m-%d \n %H:%M'
                          ,
             min: minimo,
             max: maximo,
       

我无法使用插件 $.jqplot.CanvasOverlay.VerticalLine 在图表中绘制垂直线，如下例所示： example canvas-overlay jqPlot 我已经单独尝试了这个示例并且可以工作，但就我而言，由于我的图表在 x 轴中具有格式，我只能使其与水平线一起使用，但不能与垂直线一起使用。

这是我目前尝试过的：

verticalLine: 
                    name: 'barney',
                    x: "2011-01-07 16:10:00.000",
                    lineWidth: 6,
                    color: 'rgb(100, 55, 124)',
                    shadow: false
                

我还将 x 值分配给变量和x: "2011-01-07 \n 16:10:00.000"，但仍然没有工作。 也许我应该在我已经拥有的图表之上绘制另一个 jqPlot 图表。但如果可能，我想避免这种解决方案，而是更喜欢 VerticalLine 方法。

【参考方案1】：

嗯，我还想要不止一条垂直线。所以我必须为 VerticalLines 创建一个对象列表。

var dates_vertical=[/*Array wit Dates*/];
var objects_vertical=[];
function create_vertical_lines() 
  for (var j = 0; j < dates_vertical.length ; j++) 
   objects_vertical[j]= new Object( "verticalLine":      
   "x": new $.jsDate(dates_vertical[j]).getTime(),
   "color": "red", 
   "lineWidth": 4 
    
 );
;

除了在我的 CanvasOverlay 中我写道：

canvasOverlay: 
          show: true,
          objects: objects_vertical
      

谢谢！！

【参考方案2】：

Jqplot 需要一个数值而不是字符串（即使是日期），并且无法将您从字符串传递的值转换为日期。

您可以在 jqplot 中使用 jsDate 对象将日期字符串转换为数值：

x : new $.jsDate( '2011-01-07 16:10:00.000').getTime()