根据日期坐标绘制动态矩形

Question

我需要根据日期坐标绘制动态矩形。为了提取x&y轴，我需要从日期开始做。

到目前为止，我尝试了3种方法

1. chart.addPlotBand((此函数用于绘制动态绘图带。问题是它会在x轴或y轴上绘制第一种方法。第二个问题是我不能画两个动态宽度的绘图带；坐标。

2. 我用chart尝试了这种方法。虽然它仍然有效，但它有一些问题，比如我需要找到一种方法来传递动态宽度，X-Axis&Y轴。另一个问题是需要将日期坐标转换为x&y坐标。最后，当我们展开浏览器屏幕时，栏不会展开。第二进近

   chart.renderer.rect(60, 40, 280, 50, 1)
   .attr({
   fill: '#FCFFC5',
   zIndex: 3,
   text: 'adasd'
   }).add();
   chart.renderer.label('Eco', 60, 40)
   .css({
   fontSize: '15pt',
   textAlign: 'center'
   })
   .attr({
   zIndex: 4,
   }).add();
   chart.renderer.rect(330, 40, 280, 50, 1)
   .attr({
   fill: '#04f9fe',
   zIndex: 3,
   }).add();
   

3. 我尝试过多边形，但问题是我没有x&y坐标。我需要摘录日期。也不确定第三种方法是否适用于日期格式

THis是主要的小提琴，我正想在上面提到的东西的基础上画矩形

1( 我有日期坐标，需要在x&y轴。

2( 如果我们只有第一个矩形，那么它应该是动态的，占据标题中的所有空间

Answer 1

我认为第二种方法是最好的。以下是我的指导方针，如何使用数据时间格式使其具有响应性。

演示：http://jsfiddle.net/BlackLabel/vfg51cey/

if (chart.rectOne) {
chart.rectOne.destroy();
}

在每次渲染后检查自定义矩形元素是否存在会使渲染保持响应。

API：https://api.highcharts.com/highcharts/chart.events.render