带切片器的 Google 图表返回：一名或多名参与者未能绘制()×

Question

我对Google Charts 的 DateRangeFilter有点迷失。绘制仪表板后，我收到错误消息“一个或多个参与者未能绘制（）\xc3\x97”。我不太确定为什么会发生这种情况，但我的预感是这是由于 Date 对象造成的。jsonHRData 日期行类似于“日期 {Sat Feb 15 2014 15:17:33 GMT+0100 (CET)}”。最初，我的 JSON 返回 ISO 格式的日期，我使用这种方法将其转换为 JavaScript 日期格式。

\n\n

请注意，绘制的是切片器本身，而不是 ColumnChart 本身。每次我切片时，错误消息都会重复出现。

\n\n

function drawDashboard() {\n  var jsonHRData = $.ajax({\n      url: "heartrate.json",\n      dataType:"json",\n      async: false,\n      converters: {\n        "text json": function (data) {\n            return $.parseJSON(data, true);\n        }\n       },\n      success: function (data) {\n        console.log(data);\n       }\n      }).responseJSON;\n\n  // Create a dashboard.\n  var dashboard = new google.visualization.Dashboard(document.getElementById(\'dashboard_div\'));\n\n  // Create a range slider, passing some options\n var dateRangeSlider = new google.visualization.ControlWrapper({\n    \'controlType\': \'DateRangeFilter\',\n    \'containerId\': \'filter_div\',\n    \'options\': {\n        \'filterColumnLabel\' : \'Date\'\n\n    }\n});\n\n  // Create our data table out of JSON data loaded from server.\n  var HRdata = new google.visualization.DataTable(jsonHRData);\n\n  // Instantiate and draw our chart, passing in some options.\n  var heartrateChart = new google.visualization.ChartWrapper({\n    \'chartType\': \'ColumnChart\',\n    \'containerId\': \'heartrate_container\',\n    \'options\': {\n        \'width\': 400,\n        \'height\': 240,\n        \'colors\': \'#f3b49f\'\n    }\n});\n\n// Establish dependencies, declaring that \'filter\' drives \'heartrateChart\',\n// so that the column chart will only display entries that are let through\n// given the chosen slider range.\ndashboard.bind(dateRangeSlider, heartrateChart);\n\n// Draw the dasbhoard\ndashboard.draw(HRdata);\n}\n

\n\n

我的 JSON 如下所示：

\n\n

{"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}]}]}\n

\n\n

非常感谢！

\n

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>