【发布时间】：2017-07-09 16:55:08
【问题描述】：
我正在尝试使用来自服务器的数据刷新 Google 图表仪表板。但是当我刷新数据时，ControlWrapper 出现错误。初始加载工作正常 - 但是当我从服务器获取另一组数据时，我似乎无法使用滑块 - 我收到一条错误消息：
JSFIDDLE：https://jsfiddle.net/9aktz4s3/4/
注意：在 JSFiddle 中，它不适用于初始加载，因为我有 未设置任何默认数据 - 但 JSFiddle 中的问题与我得到的相同 当我刷新数据时
这是我的 HTML：
<!--Div that will hold the dashboard-->
<div id="scorecard_dashboard_div" class="row">
<!--Divs that will hold each control and chart-->
<div id="scorecard_chart_div"></div>
<div id="scorecard_filter_div"></div>
</div>
这就是我初始化仪表板的方式：
var scorecardChartData;
var scorecardChart;
var scorecardDashboard;
var scoreCardRangeSelector;
var scorecardChartOptions = {
legend: { position: "top" },
chartArea: { width: "90%" },
xptColumns: [{
id: "dateid", label: "Date", type: "date" }, {
id: "brakingid", label: "Brakings", type: "number" }, {
id: "distanceTravelledid", label: "Distance Travelled", type: "number" }, ]
};
function initViolationChart() {
scorecardChartData = new google.visualization.DataTable();
// add columns to the chart
for (let i = 0; i < scorecardChartOptions.xptColumns.length; i++) {
var column = scorecardChartOptions.xptColumns[i];
scorecardChartData.addColumn(column.type, column.label, column.id);
}
// Create a dashboard.
scorecardDashboard = new google.visualization.Dashboard(document.getElementById('scorecard_dashboard_div'));
// Create a range slider, passing some options
scoreCardRangeSelector = new google.visualization.ControlWrapper({
controlType: "ChartRangeFilter",
containerId: "scorecard_filter_div",
options: {
filterColumnIndex: 0,
ui: { chartOptions: {legend: {position: "top" },height: 50, chartArea: {width: '90%'}}} }
});
// Create the Chart Wrapper
scorecardChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'scorecard_chart_div',
options: {legend: {position: "top"},
chartArea: {width: "90%"},
}
});
// Bind the both with Dashboard
scorecardDashboard.bind(scoreCardRangeSelector, scorecardChart);
// Draw it
scorecardDashboard.draw(scorecardChartData);
}
这是我刷新图形数据的方式：
refreshData function(){
var rows = [];
//NORMALLY HERE THERE WILL BE AN AJAX REQUEST TO GET DATA FROM SERVER
var items = jsonData.driverScorecardItems;
for (var i = 0; i < items.length; i++) {
var item = items[i];
//
var thisRow = [{
v: new Date(item.dateFormatted),
f: item.dateFormatted
}, {
v: item.harshBrakings
}, {
v: item.distanceTravelledKM
}];
rows.push(thisRow);
}
// Add the rows to my Data Table
scorecardChartData.addRows(rows);
// Redraw the Chart
scorecardDashboard.draw(scorecardChartData);
}
【问题讨论】：
标签： charts google-visualization