Question

Google Charts's DateRangeFilter我有点失落。在绘制仪表板时，我收到错误消息“一个或多个参与者未能绘制（）×”。我不太确定为什么会发生这种情况，但我的预感是由于Date对象造成的。 jsonHRData日期行看起来像“Date {Sat Feb 15 2014 15:17:33 GMT + 0100（CET）}”。最初我的JSON返回ISO格式的日期，我使用this approach将其转换为JavaScript日期格式。

请注意，切片器本身是绘制的，但不是ColumnChart本身。每次切片时，错误信息都会重复。

function drawDashboard() {
  var jsonHRData = $.ajax({
      url: "heartrate.json",
      dataType:"json",
      async: false,
      converters: {
        "text json": function (data) {
            return $.parseJSON(data, true);
        }
       },
      success: function (data) {
        console.log(data);
       }
      }).responseJSON;

  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  // Create a range slider, passing some options
 var dateRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'filter_div',
    'options': {
        'filterColumnLabel' : 'Date'

    }
});

  // Create our data table out of JSON data loaded from server.
  var HRdata = new google.visualization.DataTable(jsonHRData);

  // Instantiate and draw our chart, passing in some options.
  var heartrateChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'heartrate_container',
    'options': {
        'width': 400,
        'height': 240,
        'colors': '#f3b49f'
    }
});

// Establish dependencies, declaring that 'filter' drives 'heartrateChart',
// so that the column chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(dateRangeSlider, heartrateChart);

// Draw the dasbhoard
dashboard.draw(HRdata);
}

我的JSON如下所示：

{"cols":[{"id":"Date","label":"Date","type":"date"},{"id":"Average Heartrate","label":"Average Heartrate","type":"number"}],"rows":[{"c":[{"v":"2014-02-15T14:17:33Z"},{"v":158.4}]},{"c":[{"v":"2014-02-13T18:32:33Z"},{"v":170.7}]},{"c":[{"v":"2014-02-10T18:59:20Z"},{"v":161.7}]},{"c":[{"v":"2014-02-08T14:05:21Z"},{"v":171.1}]},{"c":[{"v":"2014-02-06T18:16:06Z"},{"v":168.4}]}]}

非常感谢！

Answer 1

决议是将我的ChartWrapper DIV容器（此处为heartrate_container）放在ControlWrapper过滤器DIV容器之外。似乎Google Chart API无法找到相应的元素。将ChartWrapper DIV放在filter_div之外，如下例所示，可以解决问题。

       <div id="dashboard_div">
       <div id="filter_div"></div>   <div id="heartrate_container"></div>
       </div>

因此，以下内容不起作用：

       <div id="dashboard_div">
       <div id="filter_div"> <div id="heartrate_container"></div>
        </div>
       </div>

带切片器的Google Chart返回：一个或多个参与者无法绘制（）×

1 个答案: