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

【问题标题】：Draw vertical lines in jqplot chart which x axe has Date format在 jqplot 图表中绘制 x ax 具有日期格式的垂直线
【发布时间】：2023-03-21 17:41:01
【问题描述】：

我有一个带有 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 方法。

【问题讨论】：

标签： charts jqplot

【解决方案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()

【讨论】：