javascript - 无法根据选择按预期隐藏数据

Question

当用户单击“隐藏笔记本电脑堆叠栏”单选按钮时，应隐藏为笔记本电脑显示的堆叠栏(蓝色)，并且当单击“全部”单选按钮时，应显示所有栏。但目前，当我单击“隐藏笔记本电脑堆叠栏”时，运输数据不会显示，甚至在“隐藏笔记本电脑”单选按钮后单击“所有”单选按钮时，运输的图例名称也会显示错误。 请查看演示here

js代码:

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var chart1 = {};
    var variableCol = {
       id: "laptop-id",
        label: "Laptop",
        type: "number"
       };
    chart1.type = "ColumnChart";
    chart1.displayed = false;
     var valueSelected;
                $scope.newValue = function(value) {
                    console.log(value);
                    console.log(chart1.data.cols.length);
                    valueSelected = value;
                    if(value == 'few' && chart1.data.cols.length == 5) {
                      alert("Laptop data should not be shown" );
                      chart1.data.cols.pop();  
                    } else {
                      chart1.data.cols.push(variableCol);
                    }

                }
                //if the ALL radio button is selected all the stacked bars should be shown
                //if SDL radio button is selected, show only server,desktop,laptop but onmouse over show the shipping details tooo
    chart1.data = {
      "cols": [{
        id: "month",
        label: "Month",
        type: "string"
      },variableCol,
      {
        id: "desktop-id",
        label: "Desktop",
        type: "number"
      }, {
        id: "server-id",
        label: "Server",
        type: "number"
      }, {
          id: "cost-id",
        label: "Shipping",
        type: "number"
      }],
      "rows": [{
        c: [{
          v: "January"
        }, {
          v: 19,
          f: "42 items"
        }, {
          v: 12,
          f: "Ony 12 items"
        }, {
          v: 7,
          f: "7 servers"
        }, {
          v: 4
        }]
      }, {
        c: [{
          v: "February"
        }, {
          v: 13
        }, {
          v: 1,
          f: "1 unit (Out of stock this month)"
        }, {
          v: 12
        }, {
          v: 2
        }]
      }, {
        c: [{
            v: "March"
          }, {
            v: 24
          }, {
            v: 5
          }, {
            v: 11
          }, {
            v: 6
          }

        ]
      }]
    };

    chart1.options = {
      "title": "Sales per month",
      "isStacked": "true",
      focusTarget: 'category',
      "fill": 20,
      "displayExactValues": true,
      colors: ['blue', 'green', 'pink', 'brown'],
      "vAxis": {
        "title": "Sales unit",
        "gridlines": {
          "count": 10
        }
      },
      "hAxis": {
        "title": "Date"
      }
    };
    $scope.myChart = chart1;
  }).value('googleChartApiConfig', {
    version: '1.1',
    optionalSettings: {
      packages: ['bar'],
      language: 'en'
    }
  });

Answer 1

您正在调用array.pop ，这会从数组中删除最后一个元素。笔记本电脑元素位于位置 1。下面是一个片段，说明如何搜索variableCol 索引，然后拼接数组以删除该元素。这是最安全的方法，因为您将确保找到该特定列。

到目前为止，这些解决方案还没有解决数据问题

不考虑颜色

if(value == 'few' && chart1.data.cols.length == 5) {
  //alert("Laptop data should not be shown" );
  var idx = chart1.data.cols.indexOf(variableCol);
  chart1.data.cols.splice(idx, 1);
  console.log("var col at " + idx);
} 

Here's a working plnkr

笔记本电脑保持蓝色

This version将使笔记本电脑保持蓝色(但位置确实会改变)。

 if (value == 'few' && chart1.data.cols.length == 5) {
  //alert("Laptop data should not be shown" );

  var colIdx = chart1.data.cols.indexOf(variableCol);
  chart1.data.cols.splice(colIdx, 1);

  var colorIdx = chart1.options.colors.indexOf("blue");
  chart1.options.colors.splice(colorIdx, 1);

} else {
  chart1.data.cols.push(variableCol);
  chart1.options.colors.push("blue");
}