Question

我有一个谷歌图表，我用JSON数据提供如下：

      var visualization;
      var chart_url = 'http://XXappspot.com/data?v=load1&v=load5&v=load15&span=100';

      function drawVisualization() {
        var query = new google.visualization.Query(chart_url);
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

        var data = response.getDataTable();
        var formatter = new google.visualization.DateFormat( { pattern: 'd MMM, HH:mm:ss' } );
        formatter.format(data, 0);
        visualization = new google.visualization.LineChart(document.getElementById('visualization'));
        visualization.draw(data, { hAxis: { format: "HH:mm" }});
      }

      google.setOnLoadCallback(drawVisualization);

现在我想在页面上添加更改数据源（请求其他数据）并刷新图表的按钮。我已经在文档中看到了控件的使用，但它们似乎只适用于已下载的数据，而我想重新下载不同的数据。任何想法如何做到这一点？

奖金问题：有没有办法改变X轴的时区？不，将“timeZone”添加到hAxis选项不起作用。最好，我想在用户的本地时区显示日期时间数据。

Answer 1

为页面上的按钮添加一个事件监听器，该按钮会更改chart_url并调用drawVisualization。

function changeUrl () {
    chart_url = 'http://new.url.com';
    drawVisualization();
}

就更改数据的时区而言，默认情况下会创建Date对象并在本地时区显示。如果您的数据代表另一个时区，则必须将其输入为UTC时间，或使用函数将日期转换为UTC时间：

function drawCharts () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Date and time');
    data.addColumn('number', 'Value');

    // add 100 rows of pseudo-random-walk data
    var val = 50, hour, minute;
    for (var i = 0; i < 100; i++) {
        val += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        if (val < 0) {
            val += 5;
        }
        else if (val > 100) {
            val -= 5;
        }
        data.addRow([new Date(2013, 0, 1, i), val]);
    }

    // the time entered was supposed to be UTC time, but is entered as local time
    // this function updates the Date objects to the proper UTC time
    function localDateToUTCDate (d) {
        d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
    }
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        data.setValue(i, 0, localDateToUTCDate(data.getValue(i, 0)));
    }

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            height: 400,
            width: 600,
            vAxis: {
                minValue: 0,
                maxValue: 100
            }
        }
    });
    chart.draw();
}
google.load('visualization', '1', {packages:['controls'], callback: drawCharts});

看到它在这里工作：http://jsfiddle.net/asgallant/4vDVn/

Answer 2

因此，考虑到日期存储在服务器上并以UTC格式传输到客户端的问题，而客户端将UTC数据解释为本地时间，解决方案是在客户端处理JSON馈送的DataTable，以便到目前为止，输入参数被正确地视为UTC：

// shift dates (1st column) to local timezone
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
  var d = data.getValue(y, 0);
  d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
  data.setValue(y, 0, d)
}

Google图表中的动态数据加载

2 个答案: