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",
        }
    ]                   
},

CanvasJS-带状线不显示

1 个答案: