Question

我有一个很好的简单图表，显示来自API的每小时请求。我想现在显示时间范围的req / h - 直到现在为止7天。

对于没有可用数据的时间，json-data-file中没有条目。所以他们需要“填补”。

目前，中间缺少的时间是filled，但不管怎样，似乎不可能让图表现在开始 - 7天。

这是Google的json数据格式的示例数据：

{"cols":[{"id":"tijdstip","label":"Tijdstip","type":"datetime"},{"id":"reqs","label":"reqs\/hour","type":"number"}],"rows":[{"c":[{"v":"Date(2016,11,10,0,0,0)"},{"v":6}]},{"c":[{"v":"Date(2016,11,10,14,0,0)"},{"v":1}]},{"c":[{"v":"Date(2016,11,10,19,0,0)"},{"v":1}]},{"c":[{"v":"Date(2016,11,10,20,0,0)"},{"v":42}]},{"c":[{"v":"Date(2016,11,10,21,0,0)"},{"v":18}]},{"c":[{"v":"Date(2016,11,10,22,0,0)"},{"v":18}]},{"c":[{"v":"Date(2016,11,10,23,0,0)"},{"v":6}]},{"c":[{"v":"Date(2016,11,11,20,0,0)"},{"v":2}]},{"c":[{"v":"Date(2016,11,13,20,0,0)"},{"v":17}]},{"c":[{"v":"Date(2016,11,13,21,0,0)"},{"v":23}]},{"c":[{"v":"Date(2016,11,14,13,0,0)"},{"v":1}]},{"c":[{"v":"Date(2016,11,16,15,0,0)"},{"v":8}]}]}

这是选项对象:(我正在使用材料线图表）

options = {
    legend: {
        position: 'none'
    },
    hAxis: {
        title: '',
        format: 'd MMM yyyy HH:00',
    },
    series: {
        0: {axis: 'Aantal'}
    },
    axes: {
        y: {
            Aantal: {label: 'req/h'},
           }
    }
};

图表启动：

var data = new google.visualization.DataTable(json);
var chart = new google.charts.Line(document.getElementById('chart'));
chart.draw(data, google.charts.Line.convertOptions(options));

Answer 1

这是材料图表的问题......

有几个选项根本不起作用

包括控制轴标签所需的内容

hAxis.minValue - 或 - hAxis.ticks

请参阅此问题了解更多信息 - ＆gt; Tracking Issue for Material Chart Feature Parity #2143

相反，您可以使用 Core 图表，并使用以下选项...

theme: 'material'

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

google.charts.load('current', {
  packages: ['corechart'],
  callback: function () {
    var ticksX = [];
    var today = new Date();
    var lastWeek = new Date(today.getTime() - (1000 * 60 * 60 * 24 * 7));
    for (var i = 0; i <= 7; i++) {
      ticksX.push(new Date(lastWeek.getTime() + (1000 * 60 * 60 * 24 * i)));
    }
    var options = {
      legend: {
        position: 'none'
      },
      hAxis: {
        title: '',
        format: 'd MMM yyyy HH:00',
        ticks: ticksX
      },
      theme: 'material',
      vAxis: {
        title: 'req/h'
      }
    };
    var json = {
      "cols":[
        {"id":"tijdstip","label":"Tijdstip","type":"datetime"},
        {"id":"reqs","label":"reqs\/hour","type":"number"}
      ],
      "rows":[
        {"c":[{"v":"Date(2016,11,10,0,0,0)"},{"v":6}]},
        {"c":[{"v":"Date(2016,11,10,14,0,0)"},{"v":1}]},
        {"c":[{"v":"Date(2016,11,10,19,0,0)"},{"v":1}]},
        {"c":[{"v":"Date(2016,11,10,20,0,0)"},{"v":42}]},
        {"c":[{"v":"Date(2016,11,10,21,0,0)"},{"v":18}]},
        {"c":[{"v":"Date(2016,11,10,22,0,0)"},{"v":18}]},
        {"c":[{"v":"Date(2016,11,10,23,0,0)"},{"v":6}]},
        {"c":[{"v":"Date(2016,11,11,20,0,0)"},{"v":2}]},
        {"c":[{"v":"Date(2016,11,13,20,0,0)"},{"v":17}]},
        {"c":[{"v":"Date(2016,11,13,21,0,0)"},{"v":23}]},
        {"c":[{"v":"Date(2016,11,14,13,0,0)"},{"v":1}]},
        {"c":[{"v":"Date(2016,11,16,15,0,0)"},{"v":8}]}
      ]
    };
    var data = new google.visualization.DataTable(json);
    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
  }
});

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

如何在时间序列中指定开始日期google-chart

1 个答案: