2016-05-30 25 views
2

我面臨一個問題,我不確定如何處理。我使用來自服務器的json響應創建Google Area Chart。我正在使用日期類型列。Google AreaChart和日期軸出現錯誤日期

這是我從服務器(複製/粘貼)獲取的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} 
      ] 
     } 
    ] 
} 

的看不出什麼毛病此數據,但最終圖形的樣子:

enter image description here

這似乎日期(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} 
      ] 
     } 
    ] 
} 

我得到預期的行爲 enter image description here

什麼可能會發生任何想法?該命令似乎對我來說很好......我嘗試了不同的瀏覽器,而且我仍然得到相同的結果。同樣這種情況發生,如果是用的,而不是AreaCharts

編輯

我發現,這個問題是不是圖形本身,而是JSON響應的解析線型圖。

我使用的是angularjs,當我console.log服務器響應我看到所有的日期值都會自動分析,但錯誤的月份。

我在一個不是很優雅的方式解決了這個通過執行以下操作:

$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)」格式。正如我所說這不是優雅/最佳,如果有人有任何建議,請繼續。

回答

0

有更多的你可以分享,你有什麼選擇?
似乎罰款這裏工作,增加點大小的知名度

Date(2016,01,23)正確顯示...

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'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

其實,我測試了它,以及它工作。當我從服務器獲取值時,它與Json解析相關的問題。不知怎的,日期字符串以錯誤的方式被解析。我會在另一個答案中詳細說明 – Roger

+0

我在想'jsapi'有JSON解析問題,這裏是另一個[類似的問題](http://stackoverflow.com/a/37531340/5090771),通過使用'loader .js' – WhiteHat

+0

不確定這是我的情況的問題,因爲如果我安慰。從服務器獲取數據後立即記錄數據,已經顯示出問題。我可以在任何情況下嘗試:) – Roger