带切片器的Google Chart返回：一个或多个参与者未能绘制（）× [英] Google Chart with slicer returns: One or more participants failed to draw()×

问题描述

我的 Google Charts的DateRangeFilter 。在绘制仪表板时，我收到错误消息一个或多个参与者未能绘制（）×。我不太清楚为什么会发生这种情况，但我的预感说这是由于Date对象造成的。 jsonHRData日期行看起来像Date {Sat Feb 15 2014 15:17:33 GMT + 0100（CET）}。最初，我的JSON返回了ISO格式的日期，我使用这种方法。

请注意，切片器本身被绘制，但不是ColumnChart本身。

 函数drawDashboard（）{
 var jsonHRData = $ .ajax （{
 url：heartrate.json，
 dataType：json，
 async：false，
转换器：{
text json：function数据）{
 return $ .parseJSON（data，true）; 
} 
}，
成功：函数（数据）{
 console.log（data）; 
} 
}）。responseJSON; 
 
 //创建仪表板。 
 var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））; 
 
 //创建一个范围滑块，传递一些选项
 var dateRangeSlider = new google.visualization.ControlWrapper（{$ b $'controlType'：'DateRangeFilter'，
' containerId'：'filter_div'，
'options'：{$ b $'filterColumnLabel'：'Date'
 $ b} 
}）; 
 
 //从服务器加载的JSON数据中创建我们的数据表。 
 var HRdata = new google.visualization.DataTable（jsonHRData）; 
 
 //实例化并绘制我们的图表，并传入一些选项。 
 var heartrateChart = new google.visualization.ChartWrapper（{
'chartType'：'ColumnChart'，
'containerId'：'heartrate_container'，
'options'：{
'width'：400，
'height'：240，
'colors'：'＃f3b49f'
} 
}）; 
 
 //建立依赖关系，声明'过滤'驱动'heartrateChart'，
 //这样柱形图将只显示通过
赋值的条目//给定选择滑块范围。 
 dashboard.bind（dateRangeSlider，heartrateChart）; 
 
 //绘制dasbhoard 
 dashboard.draw（HRdata）; 
} 
  

我的JSON如下所示：

  {cols：[{id：Date，label：Date，type：date}，{ ：平均心率，标签：平均心率，类型：数字}]，行数：[{v：2014-02-15T14： 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}]}] } 
  

非常感谢！

解决方案

解决方案是将我的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> 
  

I'm a little bit lost with Google Charts's DateRangeFilter. Upon drawing the dashboard, I'm getting the error message "One or more participants failed to draw()×". I'm not quite sure why this is happening, but my hunch says it is due to the Date object. The jsonHRData date rows looks like "Date {Sat Feb 15 2014 15:17:33 GMT+0100 (CET)}". Initially my JSON returned ISO formatted dates, which I converted to the JavaScript date format using this approach.

Note that the slicer itself is drawn, but not the ColumnChart itself. Every time I slice, the error message repeats itself.

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);
}

My JSON looks as follows:

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

Many thanks!

解决方案

The resolution was to place my ChartWrapper DIV container (here heartrate_container) outside of the ControlWrapper filter DIV container. It seemed Google Chart API was unable to find the respective element. Placing the ChartWrapper DIV outside the filter_div, as shown in the example below would solve the issue.

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

Hence, the below would not work:

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

这篇关于带切片器的Google Chart返回：一个或多个参与者未能绘制（）×的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！