Question

一切似乎都在我的饼图上。每当我选择一个新的日期时，我得到：＆＃34;无效的列索引...应该是[0-1]范围内的整数。＆＃34;显示所有正确的数据，但它仍然显示此错误。

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



function drawAmount() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m155RLnguM5hmg3zBnmeXb3nUiNKHaP6H-dYmKpXBKU/gviz/tq?gid=974830734");
query.send(amountGraph);
}

function amountGraph(response) {
if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
}

var data = response.getDataTable();

var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState = {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
    columnsTable.addRow([i, data.getColumnLabel(i)]);
    // you can comment out this next line if you want to have a default selection other than the whole list
    initState.selectedValues.push(data.getColumnLabel(i));
}
// you can set individual columns to be the default columns (instead of populating via the loop above) like this:
// initState.selectedValues.push(data.getColumnLabel(4));

var amChart = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'amoChart',
    dataTable: data,
    options: {
        title: 'Num. of Activities',
        width: 600,
        height: 400
    }
});

var amColumnFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'amoFilter',
    dataTable: columnsTable,
    options: {
        filterColumnLabel: 'colLabel',
        ui: {
            label: 'Date',
            allowTyping: false,
            allowMultiple: false,
            allowNone: false,
            selectedValuesLayout: 'aside'
        }
    },
    state: initState
});

function setChartView() {
    var state = amColumnFilter.getState();
    var row;
    var view = {
        columns: [0]
    };
    for (var i = 0; i < state.selectedValues.length; i++) {
        row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
        view.columns.push(columnsTable.getValue(row, 0));
    }
    // sort the indices into their original order
    view.columns.sort(function (a, b) {
        return (a - b);
    });
    amChart.setView(view);
    amChart.draw();
}

google.visualization.events.addListener(amColumnFilter, 'statechange', setChartView);

setChartView();
amColumnFilter.draw();
var dashboard = new google.visualization.Dashboard(
    document.getElementById('amount'));
dashboard.bind(amColumnFilter, amChart);
}

Answer 1

问题来自dashboard.bind

因为图表是使用动态view在'statechange'上绘制的无需将图表绑定到过滤器

这导致仪表板尝试重绘图表，但它不知道view

图表看起来不错，因为它会立即被setChartView

重新绘制

请忽略dashboard，请参阅以下示例...

＆＃13;

google.charts.load('current', {'packages':['corechart', 'controls', 'timeline']});
google.charts.setOnLoadCallback(drawAmount);

function drawAmount() {
  var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m155RLnguM5hmg3zBnmeXb3nUiNKHaP6H-dYmKpXBKU/gviz/tq?gid=974830734");
  query.send(amountGraph);
}

function amountGraph(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();

  var columnsTable = new google.visualization.DataTable();
  columnsTable.addColumn('number', 'colIndex');
  columnsTable.addColumn('string', 'colLabel');
  var initState = {selectedValues: []};

  // put the columns into this data table (skip column 0)
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    columnsTable.addRow([i, data.getColumnLabel(i)]);
    // you can comment out this next line if you want to have a default selection other than the whole list
    initState.selectedValues.push(data.getColumnLabel(i));
  }
  // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
  // initState.selectedValues.push(data.getColumnLabel(4));

  var amChart = new google.visualization.ChartWrapper({
      chartType: 'PieChart',
      containerId: 'amoChart',
      dataTable: data,
      options: {
          title: 'Num. of Activities',
          width: 600,
          height: 400
      }
  });

  var amColumnFilter = new google.visualization.ControlWrapper({
      controlType: 'CategoryFilter',
      containerId: 'amoFilter',
      dataTable: columnsTable,
      options: {
          filterColumnLabel: 'colLabel',
          ui: {
              label: 'Date',
              allowTyping: false,
              allowMultiple: false,
              allowNone: false,
              selectedValuesLayout: 'aside'
          }
      },
      state: initState
  });

  function setChartView() {
      var state = amColumnFilter.getState();
      var row;
      var view = {
          columns: [0]
      };
      for (var i = 0; i < state.selectedValues.length; i++) {
          row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
          view.columns.push(columnsTable.getValue(row, 0));
      }
      // sort the indices into their original order
      view.columns.sort(function (a, b) {
          return (a - b);
      });
      amChart.setView(view);
      amChart.draw();
  }

  google.visualization.events.addListener(amColumnFilter, 'statechange', setChartView);

  setChartView();
  amColumnFilter.draw();

  //don't need this...
  //var dashboard = new google.visualization.Dashboard(
      //document.getElementById('amount'));
  //dashboard.bind(amColumnFilter, amChart);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="amount">
  <div id="amoFilter"></div>
  <div id="amoChart"></div>
</div>

＆＃13;

Google Visualilzation PieChart：列索引无效...应该是[0-1]范围内的整数。但正确的数据仍在显示

1 个答案: