Question

我遇到了一个我不确定如何处理的问题。我正在使用服务器的json响应创建Google Area Chart。我正在使用日期类型列。

这是我从服务器获取的json数据（复制/粘贴）。按日期排序：

{
    "cols": [
        {"id":"1", "label":"Dates", "pattern":"", "type":"date"},
        {"id":"2", "label":"Rate", "pattern":"", "type":"number"}
    ],
    "rows": [
        {
            "c": [
                {"v":"Date(2016,01,23)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,01,24)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,01,26)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,06)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,09)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,11)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,15)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,17)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,19)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,27)"},
                {"v":4}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,28)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,02)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,03)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,09)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,13)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,14)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,17)"},
                {"v":5}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,21)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,28)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,29)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,01)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,03)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,05)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,29)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,30)"},
                {"v":4}
            ]
        }
    ]
}

这些数据看不出有什么问题，但最终图表如下：

似乎Date（2016,1,23）和与2月相对应的所有日期都转换为3月。

更奇怪的是，如果我将所有日期改为一个月，那么：

{
    "cols": [
        {"id":"1", "label":"Dates", "pattern":"", "type":"date"},
        {"id":"2", "label":"Rate", "pattern":"", "type":"number"}
    ],
    "rows": [
        {
            "c": [
                {"v":"Date(2016,02,23)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,24)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,02,26)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,06)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,09)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,11)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,15)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,17)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,19)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,27)"},
                {"v":4}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,03,28)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,02)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,03)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,09)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,13)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,14)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,17)"},
                {"v":5}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,21)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,28)"},
                {"v":2}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,04,29)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,05,01)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,05,03)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,05,05)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,05,29)"},
                {"v":1}
            ]
        },
        {
            "c": [
                {"v":"Date(2016,05,30)"},
                {"v":4}
            ]
        }
    ]
}

我得到了预期的行为

关于可能发生的事情的任何想法？订单似乎对我来说很好......我尝试了不同的浏览器，我仍然得到相同的结果。如果使用LineChart而不是AreaCharts

，也会发生这种情况

修改

我发现问题不是图表本身，而是解析json响应。

我正在使用angularjs，当我在console.log服务器响应时，我看到所有的Date值都会被自动解析但是月份错误。

我通过以下方式以非常优雅的方式解决了这个问题：

$http({
            method: 'GET',
            url: url_to_server,
            transformResponse: [function (data) {
            return data; \\ just to really get the unparsed response
        }]
        }).success(function (data) {

            data = JSON.parse(data,dateTimeReviver);


        });

其中dateTimeReviver定义为

var dateTimeReviver = function (key, value) {

if (typeof value === 'string') {

    if(value.indexOf('Date(') > -1){

        return eval(value);

    }

}
return value;

}

当然我必须将服务器响应更改为“新日期（2016,01,23）”格式。正如我所说，它不优雅/最优，如果有人有任何建议，请继续。

Answer 1

您可以分享更多内容，您设置了哪些选项？似乎在这里工作正常，为可见性添加点大小

Date(2016,01,23)正确显示...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
        "cols": [
            {"id":"1", "label":"Dates", "pattern":"", "type":"date"},
            {"id":"2", "label":"Rate", "pattern":"", "type":"number"}
        ],
        "rows": [
            {
                "c": [
                    {"v":"Date(2016,01,23)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,01,24)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,01,26)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,06)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,09)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,11)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,15)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,17)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,19)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,27)"},
                    {"v":4}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,02,28)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,02)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,03)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,09)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,13)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,14)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,17)"},
                    {"v":5}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,21)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,28)"},
                    {"v":2}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,03,29)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,01)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,03)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,05)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,29)"},
                    {"v":1}
                ]
            },
            {
                "c": [
                    {"v":"Date(2016,04,30)"},
                    {"v":4}
                ]
            }
        ]
    });

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.AreaChart(container);
    chart.draw(data, {pointSize: 5});
  },
  packages: ['corechart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Google AreaChart和日期轴的日期错误

1 个答案: