[英]Show only seven days of data on google chart
我有一個谷歌圖表，我只想在圖表上向用戶顯示 7 天的數據，他們應該能夠看到前 7 天的數據。
例如，如果我有 1/7/2017 到 15/7/2017 的數據
最初的 grpah 應該只顯示 8/7/2017 到 15/7/2017。 但如果用戶願意，他們可以返回到之前的 1/7/2017 到 8/7/2017 的結果。
現在我正在顯示所有 14 天的數據，這似乎不太好
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load google charts google.charts.load('current', {'packages':['corechart','line']}); google.charts.setOnLoadCallback(seven_day_compare); // Draw the chart and set the chart values function seven_day_compare() { var data = google.visualization.arrayToDataTable( [["Date","likes","share"],["2017-07-01",30,20],["2017-07-02",20,20],["2017-07-03",16,10],["2017-07-4",10,15],["2017-07-5",31,66],["2017-07-6",20,15],["2017-07-7",2,5],["2017-07-8",8,6],["2017-07-09",30,20],["2017-07-10",20,20],["2017-07-11",16,10],["2017-07-12",10,15],["2017-07-13",31,66],["2017-07-14",20,15],["2017-07-15",2,5],["2017-07-16",8,6]] ); // Optional; add a title and set the width and height of the chart var options = {'title':'Compare like and share', 'width':550, 'height':400,'pointSize': 10,'hAxis':{ 'slantedText': true, 'slantedTextAngle':30},'vAxis':{}}; // Display the chart inside the <div> element with id="differnt" var chart = new google.visualization.LineChart(document.getElementById('chart')); chart.draw(data, options); } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id = "chart"></div> </body> </html>
所以基本上我想把圖表分成 7 天的時間段 谷歌圖表是否有可能。 或任何其他建議
這可以使用DataView
首先，需要將第一列轉換為實際日期，
這可以通過計算列來完成...
// convert first column to date
view.setColumns([{
calc: function (dt, row) {
return new Date(dt.getValue(row, 0));
},
label: data.getColumnLabel(0),
type: 'date'
}, 1, 2]);
然后使用getFilteredRows方法來限制圖表上顯示的日期范圍...
// filter date range
view.setRows(view.getFilteredRows([{
column: 0,
minValue: new Date(2017, 6, 8),
maxValue: new Date(2017, 6, 15)
}]));
請參閱以下工作片段...
google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([["Date","likes","share"],["2017-07-01",30,20],["2017-07-02",20,20],["2017-07-03",16,10],["2017-07-4",10,15],["2017-07-5",31,66],["2017-07-6",20,15],["2017-07-7",2,5],["2017-07-8",8,6],["2017-07-09",30,20],["2017-07-10",20,20],["2017-07-11",16,10],["2017-07-12",10,15],["2017-07-13",31,66],["2017-07-14",20,15],["2017-07-15",2,5],["2017-07-16",8,6]]); var view = new google.visualization.DataView(data); // convert first column to date view.setColumns([{ calc: function (dt, row) { return new Date(dt.getValue(row, 0)); }, label: data.getColumnLabel(0), type: 'date' }, 1, 2]); // filter date range view.setRows(view.getFilteredRows([{ column: 0, minValue: new Date(2017, 6, 8), maxValue: new Date(2017, 6, 15) }])); var chart = new google.visualization.LineChart($('#chart').get(0)); chart.draw(view); }, packages:['corechart'] });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart"></div>
編輯
使用選項 --> hAxis.ticks -- 確保哪些日期出現在 x 軸上
動態構建ticks ，使用數據表/視圖方法 --> getColumnRange ，
它返回一個具有min和max屬性的對象
請參閱以下工作片段...
google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([["Date","likes","share"],["2017-07-01",30,20],["2017-07-02",20,20],["2017-07-03",16,10],["2017-07-4",10,15],["2017-07-5",31,66],["2017-07-6",20,15],["2017-07-7",2,5],["2017-07-8",8,6],["2017-07-09",30,20],["2017-07-10",20,20],["2017-07-11",16,10],["2017-07-12",10,15],["2017-07-13",31,66],["2017-07-14",20,15],["2017-07-15",2,5],["2017-07-16",8,6]]); var view = new google.visualization.DataView(data); // convert first column to date view.setColumns([{ calc: function (dt, row) { return new Date(dt.getValue(row, 0)); }, label: data.getColumnLabel(0), type: 'date' }, 1, 2]); // filter date range view.setRows(view.getFilteredRows([{ column: 0, minValue: new Date(2017, 6, 8), maxValue: new Date(2017, 6, 15) }])); // build tick for each day var oneDay = (1000 * 60 * 60 * 24); var dateRange = view.getColumnRange(0); var ticksAxisH = []; for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) { ticksAxisH.push(new Date(i)); } // optional, add final tick at far right if (ticksAxisH.length > 0) { ticksAxisH.push(new Date(ticksAxisH[ticksAxisH.length - 1].getTime() + oneDay)); } var chart = new google.visualization.LineChart($('#chart').get(0)); chart.draw(view, { hAxis: { ticks: ticksAxisH } }); }, packages:['corechart'] });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart"></div>
使Google圖表顯示過去X個數據樣本，而不僅僅是過去3天
[英]Make Google chart show past X number of data samples and not just past 3 days
如何在區域樣條線類別高圖中顯示從當前日期起一周的最后七天
[英]How do i show Last seven days of a week from current date in area spline categories highcharts
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.