使用高图x轴“区域”作为日期时间序列图

我有一个两系列的Highcharts柱形图，我试图修改过去和未来之间的颜色 . 我希望过去的颜色是绿色，未来的颜色基本上是蓝色 . 我已经阅读过关于高图“区域”的内容，它允许您在一个点之后更改轴上的属性，但文档使用简单的数据图表，而不是像我正在使用的日期时间版本 .

如何将这些区域与日期时间图表一起使用，或者更好 - 如何更改条形的边框/填充颜色，而不是使用默认颜色 .

http://www.highcharts.com/docs/chart-concepts/series#zones

https://jsfiddle.net/x4n91jL8/

$(function () {
    var colors = Highcharts.getOptions().colors;
    colors[0] = 'rgba(255,255,255,0)';
    colors[1] = '#7FC69E';


    $('#container').highcharts({
      "credits": {
        "enabled": false
      },
      "chart": {
        "renderTo": "container",
        "type": "area",
        "alignTicks": false,
        "height": 300,
        "marginLeft": 1,
        "marginBottom": 1,
        "backgroundColor": "transparent",
        "events": {}
      },
      "title": {
        "enabled": false,
        "text": ""
      },
      "plotOptions": {
        "series": {
          "pointPadding": 0,
          "groupPadding": 0.02,
          "marker": {
            "enabled": false
          }
        },
        "column": {
          "animation": false,
          "grouping": false,
          "pointPadding": 0,
          "borderWidth": 0,
          "allowPointSelect": false,
          "events": {}
        },
        "line": {
          "allowPointSelect": false,
          "events": {}
        },
        "area": {
          "allowPointSelect": false,
          "events": {}
        }
      },
      "legend": {
        "enabled": false,
        "layout": "horizontal",
        "align": "center",
        "verticalAlign": "top",
        "floating": true,
        "backgroundColor": "#FFFFFF"
      },
      "tooltip": {
        "enabled": false,
        "shared": true
      },
      "rangeSelector": {
        "enabled": false,
        "inputEnabled": true
      },
      "xAxis": {
        "gridLineColor": "transparent",
        "zIndex": 3,
        "minorTickInterval": 604800000,
        "minorTickPosition": "inside",
        "minorTickLength": 5,
        "minorTickWidth": 1,
        "minorGridLineWidth": 0,
        "startOnTick": false,
        "gridLineWidth": 1,
        "type": "datetime",
        "min": 1451800000000,
        "max": 1457000000000,
        "labels": {
          "enabled": false,
          "step": 1
        },
        "dateTimeLabelFormats": {
          "month": "%b",
          "year": "%Y"
        }
      },
      "series": [
        {
          "name": "Duration",
          "zIndex": 3,
          "type": "column",
          "data": [
            [
              1452470400000,
              6.5
            ],
            [
              1453075200000,
              11.25
            ],
            [
              1453680000000,
              8.25
            ],
            [
              1454284800000,
              6.55
            ],
            [
              1454889600000,
              1.05
            ],
            [
              1455494400000,
              4.633333333333333
            ],
            [
              1456099200000,
              1.1666666666666667
            ],   
          ],
          "tooltip": {
            "yDecimals": 0
          },
          "borderWidth": 1,
          "borderColor": "#008244",
          "opacity": 0.6,
          "lineWidth": 1,
          "states": {
            "hover": {
              "lineWidth": 1
            }
          },
          "zoneAxis": "x",
          "zones": [
            {
              "value": 1454284800000
            },
            {
              "borderColor": "#566888"
            }
          ],
          "_colorIndex": 0
        },
        {
          "name": "Duration",
          "zIndex": 3,
          "type": "column",
          "data": [
            [
              1454284800000,
              5.216666666666667
            ],
            [
              1454889600000,
              0
            ],
            [
              1455494400000,
              2.6666666666666665
            ],
            [
              1456099200000,
              1.1666666666666667
            ],
          ],
          "tooltip": {
            "yDecimals": 0
          },
          "borderWidth": 0,
          "borderColor": "#008244",
          "opacity": 0.6,
          "lineWidth": 1,
          "states": {
            "hover": {
              "lineWidth": 1
            }
          },
          "zoneAxis": "x",
          "zones": [
            {
              "value": 1454284800000
            },
            {
              "fillColor": "#566888"
            }
          ],
          "_colorIndex": 1
        }
      ],
      "yAxis": [
        {
          "labels": {
            "enabled": false
          },
          "opposite": false,
          "gridLineWidth": 0,
          "minorGridLineWidth": 0,
          "showEmpty": false,
          "title": {
            "text": "",
            "align": "middle",
            "style": {
              "color": "rgba(255,255,255,0)"
            }
          },
          "lineWidth": 1,
          "min": 0,
          "startOnTick": false,
          "endOnTick": false,
          "max": 16.875,
          "lineColor": "rgba(255,255,255,0)",
          "index": 0
        }
      ]
    });

});