charts - 刷新 Google 图表仪表板

Question

我正在尝试使用服务器中的数据刷新 Google 图表仪表板。但当我刷新数据时，ControlWrapper 出现错误。初始负载工作正常 - 但当我从服务器获取另一组数据时，我似乎无法使用 slider - 我收到错误消息:

JSFIDDLE:https://jsfiddle.net/9aktz4s3/4/

Note: In the JSFiddle it doesn't work on Initial load because I have not set any default data - but the issue in JSFiddle is the same I get when I refresh data

这是我的 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);

}

Answer 1

看起来您偶然发现了某种错误...

从 fiddle 中获取代码，在进行以下修改后，一切正常......

只需删除 'corechart'来自'packages'加载时...

之前

google.charts.load('current', {
  'packages': ['corechart', 'controls']  // <-- remove 'corechart' 
});

之后

google.charts.load('current', {
  'packages': ['controls']
});

---

请参阅以下工作片段...

var scorecardChartData;
var scorecardChart;
var scorecardTable;
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"
  }, ]
};

google.charts.load('current', {
  'packages': ['controls']
});
google.charts.setOnLoadCallback(initViolationChart);

function initViolationChart() {
  scorecardChartData = new google.visualization.DataTable();

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

  scorecardChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'scorecard_chart_div',
    options: {
      legend: {
        position: "top"
      },
      chartArea: {
        width: "90%"
      },
    }

  });

  scorecardDashboard.bind(scoreCardRangeSelector, scorecardChart);
  scorecardDashboard.draw(scorecardChartData);
}

var jsonData = {

  driverScorecardItems: [{
    "scoreDate": "2017-02-15T00:00:00",
    "dateFormatted": "15-Feb-2017",
    "harshBrakings": 0,
    "distanceTravelledKM": 15.7286863,

  }, {
    "scoreDate": "2017-02-16T00:00:00",
    "dateFormatted": "16-Feb-2017",
    "harshBrakings": 0,
    "distanceTravelledKM": 23.1175938,

  }, {
    "scoreDate": "2017-02-17T00:00:00",
    "dateFormatted": "17-Feb-2017",
    "distanceTravelledKM": 49.20245,

  }, {
    "scoreDate": "2017-02-18T00:00:00",
    "dateFormatted": "18-Feb-2017",
    "harshBrakings": 0,
    "distanceTravelledKM": 13.8180962,

  }, {
    "scoreDate": "2017-02-19T00:00:00",
    "dateFormatted": "19-Feb-2017",
    "harshBrakings": 0,
    "distanceTravelledKM": 61.5765,

  }, {
    "scoreDate": "2017-02-20T00:00:00",
    "dateFormatted": "20-Feb-2017",
    "harshBrakings": 0,
    "distanceTravelledKM": 5.134261,

  }]
}

$(function() {
  $('#refreshChart').click(function() {
    var rows = [];
    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);
    }

    scorecardChartData.addRows(rows);
    scorecardDashboard.draw(scorecardChartData);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<button id="refreshChart">
  Refresh
</button>

<!--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 id="scorecard_table_div"></div>
</div>

---

注意:

driverScorecardItems 中的第三项数组缺少 --> "harshBrakings" 的属性

var jsonData = {

  driverScorecardItems: [{
    "scoreDate": "2017-02-15T00:00:00",
    "dateFormatted": "15-Feb-2017",
    "harshBrakings": 0,
    "distanceTravelledKM": 15.7286863,

  }, {
    "scoreDate": "2017-02-16T00:00:00",
    "dateFormatted": "16-Feb-2017",
    "harshBrakings": 0,
    "distanceTravelledKM": 23.1175938,

  }, {
    "scoreDate": "2017-02-17T00:00:00",
    "dateFormatted": "17-Feb-2017",
    "distanceTravelledKM": 49.20245,

  }, {
  ...