刷新Google图表信息中心

Question

我正在尝试使用服务器中的数据刷新Google Chart信息中心。但是当我刷新数据时，我收到 [error screen][1] 的错误。初始加载工作正常 - 但是当我从服务器获得另一组数据时，我似乎无法使用Slider - 我收到错误消息：

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

  

注意：在JSFiddle中，它不能处理初始加载，因为我有   没有设置任何默认数据 - 但JSFiddle中的问题与我得到的相同   当我刷新数据时

这是我的HTML：

ControlWrapper

这就是我初始化仪表板的方式：

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

}

Answer 1

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

从小提琴中取出代码后，一切正常，经过以下修改......

加载时只需从'corechart'删除'packages'

之前

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

之后

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

请参阅以下工作代码段...

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意：

driverScorecardItems数组中的第三项缺少 - ＆gt;的属性"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,

  }, {
  ...

Answer 2

我的工作 -

如果我在刷新数据/图表时调用initViolationChart()函数，一切似乎都能正常工作。

所以我更改了以下刷新功能：

  $('#refreshChart').click(function() {

    // HERE - I re-initalise the chart dashboard. And then it works
    initViolationChart()

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


  });

工作小提琴：https://jsfiddle.net/40ta8xvu/