Question

我希望在我的覆盆子pi终端上集成一个谷歌折线图，以显示有关我的咖啡消费的一些统计数据。如果我的json没有日期值，则折线图应该将值设置为0.此时，没有值的日期已获得前一天的值。有什么想法吗？

我使用过这种配置：

id

没有值的日期不会显示在我的json中。例如：日期没有条目3.6.2017这是json：

  ide-helper:generate  Generate a new IDE Helper file.
  ide-helper:meta      Generate metadata for PhpStorm
  ide-helper:models    Generate autocompletion for models

Current line chart output (The values of date 2. Jun to 5. June should be 0)

Answer 1

只需要为缺少的日期添加一行......

使用数据表方法getFilteredRows检查某一天的数据

请参阅以下工作代码段...

加载json，然后从数据中的最小日期开始，
并以当前日期结束，每天检查数据

如果现在找到行，则会添加一个值为0

的行

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart', 'table']
});

function drawChart() {
  var jsonData = [{
      "_id": {
        "year": 2017,
        "month": 6,
        "day": 9,
        "action": "Coffee made"
      },
      "createdAt": "2017-06-09T06:41:50.904Z",
      "count": 1
    },
    {
      "_id": {
        "year": 2017,
        "month": 6,
        "day": 8,
        "action": "Coffee made"
      },
      "createdAt": "2017-06-08T05:44:04.081Z",
      "count": 1
    },
    {
      "_id": {
        "year": 2017,
        "month": 6,
        "day": 7,
        "action": "Coffee made"
      },
      "createdAt": "2017-06-07T06:10:01.713Z",
      "count": 4
    },
    {
      "_id": {
        "year": 2017,
        "month": 6,
        "day": 6,
        "action": "Coffee made"
      },
      "createdAt": "2017-06-06T05:52:09.775Z",
      "count": 2
    },
    {
      "_id": {
        "year": 2017,
        "month": 6,
        "day": 2,
        "action": "Coffee made"
      },
      "createdAt": "2017-06-02T06:03:47.243Z",
      "count": 1
    },
    {
      "_id": {
        "year": 2017,
        "month": 6,
        "day": 1,
        "action": "Coffee made"
      },
      "createdAt": "2017-06-01T05:37:31.399Z",
      "count": 1
    },
    {
      "_id": {
        "year": 2017,
        "month": 5,
        "day": 31,
        "action": "Coffee made"
      },
      "createdAt": "2017-05-31T05:18:49.220Z",
      "count": 1
    }
  ];

  var datePattern = 'd.M.yy';
  var formatDate = new google.visualization.DateFormat({
    pattern: datePattern
  });

  var dataTable = new google.visualization.DataTable({
    "cols": [
      {"label": "Date", "type": "date"},
      {"label": "Cups of Coffee", "type":"number"}
    ]
  });

  jsonData.forEach(function (row) {
    dataTable.addRow([
      new Date(row.createdAt),
      row.count
    ]);
  });

  var startDate = dataTable.getColumnRange(0).min;
  var endDate = new Date();
  var oneDay = (1000 * 60 * 60 * 24);
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    var coffeeData = dataTable.getFilteredRows([{
      column: 0,
      test: function (value, row, column, table) {
        var coffeeDate = formatDate.formatValue(table.getValue(row, column));
        var testDate = formatDate.formatValue(new Date(i));
        return (coffeeDate === testDate);
      }
    }]);
    if (coffeeData.length === 0) {
      dataTable.addRow([
        new Date(i),
        0
      ]);
    }
  }
  dataTable.sort({column: 0});

  var chartLine = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart',
    dataTable: dataTable,
    options: {
      theme: 'material',
      legend: {
        position: 'none',
      },
      chartArea: {
        top: 12,
        right: 12,
        bottom: 48,
        left: 48,
        height: '100%',
        width: '100%'
      },
      colors: ['#34495e'],
      hAxis: {
        format: datePattern,
        gridlines: {
          count: 15
        },
      },
      pointSize: 4,
      vAxis: {
        title: 'Cups of Coffee',
      }
    }
  });
  chartLine.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Line Chart将无数据的值设置为0

1 个答案: