javascript - CanvasJS - strip 线不显示

Question

我正在尝试制作一张 FRED 美国每月房屋供应量图表。我已经能够使用 Canvas.js 来显示数据，但我似乎无法让带状线工作 - 我试图为每次经济衰退显示垂直带状线，但当我添加代码时什么也没有显示我正在关注 Canvas.js 文档。

jQuery.getJSON("h/data/monthlySupplyHousesUS.json", function(results) {  
    $.each(results.dataset.data, function(key, value){
        twoPoints.push({x: new Date(value[0]), y: parseFloat(value[1])});
    });
    var chart = new CanvasJS.Chart("monthlySupplyHousesUSChart",{
        title:{
            text:"Monthly Supply of Houses in United States"
        },
        axisX:{
            valueFormatString: "YYYY-MM",
            interval: 1,
            stripLines:[
                {
                    startValue:2007-01,
                    endValue:2009-01,                
                    color:"#d8d8d8",
                }
            ]                   
        },
        axisY: {
            title: "Supply"
        },
        toolTip: {
            shared: true
        },
        data: [{
            name: "Supply",
                showInLegend: true,
            legendText: "Index",
            type: "line",
            xValueFormatString: "YYYY-MM-DD",
            dataPoints : twoPoints
        }]
    });
    chart.render();
});

JSON 看起来像:

{
  "dataset": {
    "id": 123643,
    "dataset_code": "MSACSR",
    "database_code": "FRED",
    "name": "Monthly Supply of Houses in the United States",
    "description": "Months' Supply Seasonally Adjusted, The months' supply is the ratio of houses for sale to houses sold. This statistic provides an indication of the size of the for sale inventory in relation to the number of houses currently being sold. The months' supply indicates how long  the current for sale inventory would last given the current sales rate if no additional new houses were built. ",
    "refreshed_at": "2018-06-25T23:28:04.022Z",
    "newest_available_date": "2018-05-01",
    "oldest_available_date": "1963-01-01",
    "column_names": ["Date", "Value"],
    "frequency": "monthly",
    "type": "Time Series",
    "premium": false,
    "limit": null,
    "transform": null,
    "column_index": null,
    "start_date": "1963-01-01",
    "end_date": "2018-05-01",
    "data": [
        ["2018-05-01", 5.2],
        ["2018-04-01", 5.5],
        ["2018-03-01", 5.3],
        ["2018-02-01", 5.4],
        ["2018-01-01", 5.6],
        ["2017-12-01", 5.5],
        ["2017-11-01", 4.9],
        ["2017-10-01", 5.6],
        ["2017-09-01", 5.3],
        ["2017-08-01", 6.0],
        ["2017-07-01", 6.0],
        ["2017-06-01", 5.3],
        ["2017-05-01", 5.4],
        ["2017-04-01", 5.4],
        ["2017-03-01", 5.0],
        ["2017-02-01", 5.1],
        ["2017-01-01", 5.3],
        ["2016-12-01", 5.6],
        ["2016-11-01", 5.3],
        ["2016-10-01", 5.2],
        ["2016-09-01", 5.2],
        ["2016-08-01", 5.0],
        ["2016-07-01", 4.5],
        ["2016-06-01", 5.2],
        ["2016-05-01", 5.2],
        ["2016-04-01", 5.1],
        ["2016-03-01", 5.4],
        ["2016-02-01", 5.4],
        ["2016-01-01", 5.5],
        ["2015-12-01", 5.2],
        ["2015-11-01", 5.5],
     ]
   }
 }  

Answer 1

由于 x 值是日期时间，因此带状线值也应以日期时间形式给出。

axisX:{
    valueFormatString: "YYYY-MM",
    interval: 1,
    stripLines:[
        {
            startValue: new Date("2007-01-01"),
            endValue:new Date("2009-01-01"),
            color:"#d8d8d8",
        }
    ]                   
},