在Google圖表中格式化工具提示數據

Question

我有頁面http://goodandevilbook.com/stats，我使用的是Google圖表來顯示數據。

其中一個圖表（面積圖）當我將鼠標懸停在工具提示上時，它以難以閱讀的格式顯示日期。我想將此日期格式化爲更易讀的方式。此外，該工具提示顯示ga：訪客，我想改變這只是訪客。我無法真正把JSON文件數據轉換成所需的格式，因爲這是自動生成的

不知何故，我需要改變這個數據，一旦我收到它。下面是我生成區域圖的代碼：

google.setOnLoadCallback(drawGraph); 
function drawGraph(){ 
    var graph = new google.visualization.ChartWrapper({ 
    "containerId":"last30chart", 
    "dataSourceUrl":"http://good-and-evil-stats.appspot.com/query?id=ahVzfmdvb2QtYW5kLWV2aWwtc3RhdHNyFQsSCEFwaVF1ZXJ5GICAgICA14wKDA&format=data-table-response", 
     "refreshInterval":0, 
     "chartType":"AreaChart", 
      "options":{ 
       "width":675, 
       "height":400, 
       "chartArea":{width:"95%", height:"83%"}, 
       "areaOpacity":0.1, 
       "pointSize":4, 
       "backgroundColor":"transparent", 
       "colors":['#76BB72'], 
       "legend":{position: 'none'}, 
       "tooltip":{textStyle: {fontSize:18}}, 
       "hAxis":{textPosition:"none", gridlines: {color: 'red', count: 7}}, 
       "dateFormat":{formatType: "long"} 
      } 
      }); 
    graph.draw();} 

我試圖插入用於格式化日期的代碼。

https://developers.google.com/chart/interactive/docs/reference#dateformatter

這就是我與玩弄：

var monthYearFormatter = new google.visualization.DateFormat({ 
    pattern: "MMM yyyy" 
}); 
monthYearFormatter.format(dataSourceUrl); 

我試着玩這個存在了相當一段時間，並不能得到它的工作。我是Javascript/jquery的新手，所以我不太確定自己在做什麼。

Answer 1

使用ChartWrapper對象的dataSourceUrl參數來拉入數據時，您無法格式化數據。您必須切換到使用Query對象，然後才能根據需要設置數據格式和更改列標籤。由於您的日期實際上是字符串而不是Date對象，因此您必須先使用DataView將它們轉換爲Date對象，然後才能格式化它們。這裏有一個例子：

function drawGraph(){ 
    var query = new google.visualization.Query("http://good-and-evil-stats.appspot.com/query?id=ahVzfmdvb2QtYW5kLWV2aWwtc3RhdHNyFQsSCEFwaVF1ZXJ5GICAgICA14wKDA&format=data-table-response"); 
    query.send(function (response) { 
     if (response.isError()) { 
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
     } 

     var data = response.getDataTable(); 
     // set the label of column 1 to "Visitors" 
     data.setColumnLabel(1, 'Visitors'); 

     // create a formatter for the dates 
     var formatter = new google.visualization.DateFormat({pattern: "MMM yyyy"}); 

     var graph = new google.visualization.ChartWrapper({ 
      "containerId": "last30chart", 
      "chartType":"AreaChart", 
      dataTable: data, 
      "options": { 
       "width":675, 
       "height":400, 
       "chartArea": {width:"95%", height:"83%"}, 
       "areaOpacity":0.1, 
       "pointSize":4, 
       "backgroundColor":"transparent", 
       "colors":['#76BB72'], 
       "legend":{position: 'none'}, 
       "tooltip":{textStyle: {fontSize:18}}, 
       "hAxis":{textPosition:"none", gridlines: {color: 'red', count: 7}}, 
       "dateFormat":{formatType: "long"} 
      }, 
      view: { 
       columns: [{ 
        type: 'date', 
        label: data.getColumnLabel(0), 
        calc: function (dt, row) { 
         var dateStr = dt.getValue(row, 0); 
         var year = parseInt(dateStr.substring(0, 4), 10); 
         var month = parseInt(dateStr.substring(4, 6), 10) - 1; // convert month to 0-based index 
         var day = parseInt(dateStr.substring(6, 8), 10); 
         var date = new Date(year, month, day); 
         return {v: date, f: formatter.formatValue(date)}; 
        } 
       }, 1] 
      } 
     }); 
     graph.draw(); 
    }); 
}