CanvasJS - 带状线不显示答案

【问题标题】：CanvasJS - Striplines not displayingCanvasJS - 带状线不显示
【发布时间】：2018-12-23 08:03:02
【问题描述】：

我正在尝试制作 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],
     ]
   }
 }

【问题讨论】：

标签： javascript jquery json html5-canvas

【解决方案1】：

由于 x 值是日期时间，所以带状线值也应该作为日期时间给出。

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

【讨论】：