如何在 Angularjs Google Chart 中隐藏和显示列

Question

我有角度谷歌图表，每当用户单击删除 R1 按钮时，应删除 R1，当用户单击 R2 时，必须删除 R2。在这里，我有我的 [Fiddle][1] 我尝试使用 google chart 删除 removeColumn(['r1']) 的方法，就像 google chart 的使用方式一样，但没有奏效我需要在 angularjs google chart 中隐藏和显示列的方法。 如果您有任何想法，请告诉我。

[1]: http://jsfiddle.net/3crujkav/

Answer 1

使用复选框可能会更容易...

var data;
var colors = ['red', 'blue', 'green'];
$scope.$watch('datax', function(newValue, oldValue) {
  data = google.visualization.arrayToDataTable($scope.datax);
  colors.forEach(function (color, index) {
    data.setColumnProperty(index + 1, 'color', color);
  });
  drawChart();
}, true);

$scope.toggleCol = function() {
  drawChart();
}

function drawChart() {
  var chartColors = [];
  var chartColumns = [0];
  var view = new google.visualization.DataView(data);

  var checks = document.getElementsByTagName('input');
  for (var i = 0; i < checks.length; i++) {
    var seriesColumn = parseInt(checks[i].value);
    if (checks[i].checked) {
      chartColumns.push(seriesColumn);
      chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
    }
  }
  view.setColumns(chartColumns);
  options.colors = chartColors;
  chart.draw(view, options);
}

---

见forked fiddle

---

编辑

使用 DataView 将值列从字符串转换为数字...

var data;
var dataView;
$scope.$watch('datax', function(newValue, oldValue) {
  data = google.visualization.arrayToDataTable($scope.datax);
  dataView = new google.visualization.DataView(data);

  // convert string columns to number
  var viewColumns = [0];
  $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
    // skip first column
    if (colIndex === 0) {
      return;
    }

    viewColumns.push({
      calc: function (dt, row) {
        return parseInt(dt.getValue(row, colIndex));
      },
      label: data.getColumnLabel(colIndex),
      type: data.getColumnType(colIndex)
    });
  });
  dataView.setColumns(viewColumns);


  drawChart();
}, true);

然后使用新的dataView完成绘图...

function drawChart() {
  var chartColors = [];
  var chartColumns = [0];

  // use dataView here
  var view = new google.visualization.DataView(dataView);
  ...