Javascript 带切片器返回的Google图表:一个或多个参与者未能绘制();
我有点迷路了。绘制仪表板时,我收到错误消息“一个或多个参与者未能绘制()×”。我不太清楚为什么会发生这种情况,但我的直觉认为这是由于日期对象造成的。jsonHRData日期行看起来像“日期{Sat Feb 15 2014 15:17:33 GMT+0100(CET)}”。最初,我的JSON返回ISO格式的日期,我使用转换为JavaScript日期格式 请注意,切片器本身是绘制的,而不是柱形图本身。每次我切片时,错误消息都会重复Javascript 带切片器返回的Google图表:一个或多个参与者未能绘制();,javascript,json,google-visualization,Javascript,Json,Google Visualization,我有点迷路了。绘制仪表板时,我收到错误消息“一个或多个参与者未能绘制()×”。我不太清楚为什么会发生这种情况,但我的直觉认为这是由于日期对象造成的。jsonHRData日期行看起来像“日期{Sat Feb 15 2014 15:17:33 GMT+0100(CET)}”。最初,我的JSON返回ISO格式的日期,我使用转换为JavaScript日期格式 请注意,切片器本身是绘制的,而不是柱形图本身。每次我切片时,错误消息都会重复 function drawDashboard() { var j
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}]}]}
非常感谢 解决方案是将我的ChartWrapper DIV容器(这里是heartrate_容器)放在ControlWrapper filter DIV容器之外。谷歌图表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>
解决方案是将我的ChartWrapper DIV容器(此处为heartrate\u容器)放置在ControlWrapper filter DIV容器的外部。谷歌图表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>
这是因为API覆盖了为每个控件或图表指定的容器div的内容,因此当API在filter\u div
中绘制控件时,heartrate\u container
div已从DOM中删除。非常感谢。这是有道理的!实际上,它是第1节。为你的仪表板创建一个HTML框架。这是因为API覆盖了为每个控件或图表指定的容器div的内容,所以当API在filter\u div
中绘制控件时,heartrate\u container
div已从DOM中删除。谢谢大家。这是有道理的!实际上,它是第1节。为仪表板创建HTML框架
。