谷歌折線圖使用開始和結束日期

Question

我有一個開始日期（01月1日）和結束日期（31月12日）。在此期間有三人拍照。

例如：

var chartData = { 
    "period":{"startDate":"01 jan","endDate":"31 Dec"}, 
    "person1":[{"date":"01 feb","photos":5},{"date":"15 aug","photos":5}, {"date":"20 dec","photos":5}], 
    "person2":[{"date":"25 feb","photos":2},{"date":"18 july","photos":8},{"date":"05 nov","photos":2}], 
    "person3":[{"date":"01 march","photos":4},{"date":"15 aug","photos":1}] 
} 

我想要通過使用上述數據來創建圖表。

示例圖：

注：x軸應該是MMM格式顯示月

Answer 1

您可以考慮通過Google Line Chart與系列畫它。 由於指定的格式不與谷歌圖JSON格式兼容，下面的例子演示瞭如何將它與顯示器轉換：

google.charts.load('current', { packages: ['corechart', 'line'] }); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var jsonData = { 
 
     "period": { 
 
      "startDate": "01 jan", 
 
      "endDate": "31 Dec" 
 
     }, 
 
     "person1": [ 
 
      { 
 
       "date": "01 feb", 
 
       "photos": 5 
 
      }, 
 
      { 
 
       "date": "15 aug", 
 
       "photos": 5 
 
      }, 
 
      { 
 
       "date": "20 dec", 
 
       "photos": 5 
 
      } 
 
     ], 
 
     "person2": [ 
 
      { 
 
       "date": "25 feb", 
 
       "photos": 2 
 
      }, 
 
      { 
 
       "date": "18 july", 
 
       "photos": 8 
 
      }, 
 
      { 
 
       "date": "05 nov", 
 
       "photos": 2 
 
      } 
 
     ], 
 
     "person3": [ 
 
      { 
 
       "date": "01 march", 
 
       "photos": 4 
 
      }, 
 
      { 
 
       "date": "15 aug", 
 
       "photos": 1 
 
      } 
 
     ] 
 
    }; 
 

 

 
    var data = { 
 
     "cols": [], 
 
     "rows": [] 
 
    }; 
 

 
    //columns 
 
    for (var key in jsonData) { 
 
     if (jsonData.hasOwnProperty(key)) { 
 
      addColumn(data, key, (key === "period" ? "date" : "number")); 
 
     } 
 
    } 
 

 
    var columnPositions = { "person1": 1, "person2": 2, "person3": 3 }; 
 

 
    //rows 
 
    for (var key in jsonData) { 
 
     if (jsonData.hasOwnProperty(key)) { 
 
      if (key == "period") { 
 
       addRow(data, [parsePeriod(jsonData[key].startDate), null, null, null]); //start 
 
       addRow(data, [parsePeriod(jsonData[key].endDate), null, null, null]); //end 
 
      } else { 
 
       var columnPos = columnPositions[key]; 
 
       jsonData[key].forEach(function(item) { 
 
        var vals = [parsePeriod(item.date), null, null, null]; 
 
        vals[columnPos] = item.photos; 
 
        addRow(data, vals); 
 
       }); 
 
      } 
 
     } 
 
    } 
 

 
    
 

 

 
    var dataTable = new google.visualization.DataTable(data); 
 
    
 
    var options = { 
 
     interpolateNulls: true, 
 
     hAxis: { 
 
      title: 'Period', 
 
      format: 'MMM' 
 
     }, 
 
     vAxis: { 
 
      title: 'Number of photos' 
 
     } 
 
    }; 
 

 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(dataTable, options); 
 
} 
 

 

 

 

 
function parsePeriod(value) { 
 
    var monthNames = { 'jan': 0, 'feb': 1, 'march': 2, 'apr': 3, 'may': 4, 'jun': 5, 'july': 6, 'aug': 7, 'sep': 8, 'oct': 9, 'nov': 10, 'dec': 11 }; 
 
    var parts = value.split(" "); 
 
    var day = parseInt(parts[0]); 
 
    var month = monthNames[parts[1].toLowerCase()]; 
 
    var d = new Date(2015, month, day); 
 
    return d; 
 
} 
 

 

 

 
function addColumn(data, label, type) { 
 
    data.cols.push({ 
 
     "id": "", 
 
     "label": label, 
 
     "pattern": "", 
 
     "type": type 
 
    }); 
 
} 
 

 

 
function addRow(data, values) { 
 
    
 
    var rowValues = values.map(function (v) { 
 
     return { "v": v }; 
 
    }); 
 

 
    data.rows.push({ 
 
     "c": rowValues 
 
    }); 
 
}

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