带有切片机的Google图表返回：一个或多个参与者未能绘制（）×

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

请注意，切片机本身被绘制，但不是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}]}]}

非常感谢！

来源

2014-02-15 Kris Van den Bergh

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

来源

2014-02-16 09:32:02

这样做的原因是，因为API覆盖每个控制或图表中指定的div容器的内容物，所以，当API提请控制在'filter_div'中，''heartrate_container' div已从DOM中移除。 – asgallant

感谢asgallant。这很有道理！ –

它实际上是[在文档]（https://developers.google.com/chart/interactive/docs/gallery/controls）中的第1节。为您的仪表板创建一个HTML框架。 – Pathros

带有切片机的Google图表返回：一个或多个参与者未能绘制（）×

回答

相关问题