在谷歌图表上只显示 7 天的数据答案

【问题标题】：Show only seven days of data on google chart在谷歌图表上只显示 7 天的数据
【发布时间】：2017-07-11 14:30:08
【问题描述】：

我有一个谷歌图表，我只想在图表上向用户显示 7 天的数据，他们应该能够看到前 7 天的数据。

例如，如果我有 2017 年 1 月 7 日至 2017 年 7 月 15 日的数据

grpah 最初应仅显示 2017 年 8 月 7 日至 2017 年 7 月 15 日。但如果用户愿意，他们可以返回之前的 2017 年 1 月 7 日到 2017 年 8 月 7 日的结果。

现在我正在显示所有 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 天的时间段谷歌图表是否可能。或任何其他建议

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

这可以使用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)
}]));

请参阅以下工作 sn-p...

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 属性的对象

请参阅以下工作 sn-p...

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>

【讨论】：

哦，这肯定会有所帮助，谢谢:)。我可以创建一些函数来更改最大值和最小值以向用户显示特定数据。因此，如果用户单击上一个按钮 minValue: new Date(2017, 7, 1), maxValue: new Date(2017, 7, 8)。顺便说一句，你写了 minValue: new Date(2017, 6, 8), maxValue: new Date(2017, 6, 15)。我认为应该是 7 而不是 6。对吧？
基于 javascript 的月份为零 (0=Jan,1=Feb,6=July)
哦，好的。对不起，现在明白了。我将在我的网站上尝试您的代码。非常感谢:)
嗨，我想我已经在你的代码的帮助下完成了大部分任务，但是如果我选择 minValue:new Date(2017,6,02), maxValue: new Date( 2017,6,9) ,(或许多其他日期) 然后它不显示垂直轴并且不显示最左边的日期jsfiddle.net/chxpanat。我用谷歌搜索但没有运气。这很重要，如果离开的日期没有出现，我所有的工作都会白费。你能帮忙吗？
非常感谢白帽。你对谷歌图表有广泛的了解。我永远无法在谷歌上找到这个解决方案。谢谢：）。你是冠军:)