用于限制用户在达到限制时点击/提交的JavaScript代码

时间:2017-08-08 21:00:01

标签: javascript jquery html angularjs

我在角度应用程序中处理谷歌图表。场景是当用户点击图表的图例时,相应的数据隐藏在图表上。我想限制数据的隐藏,以便没有数据时图表不是空白。至少应该可以看到一系列数据。用户可以选择图例并仅隐藏3个图例数据,当用户选择第4个图例时,我需要显示“不能隐藏图表的完整数据”的警报并停止隐藏该图例的数据。

工作样本https://plnkr.co/edit/OBsZFO8LerlKcWAu65sZ?p=preview

在上面的示例中,用户可以隐藏所有图例的数据,图表区域将为空白。我需要限制,以便始终在图表上显示一个图例数据。任何输入都会有所帮助。

js code:

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var chart1 = {};
    chart1.type = "LineChart";
    chart1.displayed = false;
    chart1.data = {
      "cols": [{
        id: "month",
        label: "Month",
        type: "string"
      }, {
        id: "laptop-id",
        label: "Laptop",
        type: "number"
      }, {
        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",
      "colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
      "isStacked": "true",
      "fill": 20,
      "displayExactValues": true,
      "vAxis": {
        "title": "Sales unit",
        "gridlines": {
          "count": 10
        }
      },
      "hAxis": {
        "title": "Date"
      }
    };
    chart1.view = {
      columns: [0, 1, 2, 3, 4]
    };
    $scope.myChart = chart1;

    var hidden = [];

    $scope.seriesSelected = function(selectedItem) {

      var col = selectedItem.column;
      hidden.push(col);

    /*  if (hidden.length === ($scope.myChart.view.columns.length  -1 )) {
        window.alert("you can't remove all cols!");

      }*/

      console.log(selectedItem);

      //If there's no row value, user clicked the legend.
      if (selectedItem.row === null) {
        //If true, the chart series is currently displayed normally.  Hide it.
        console.log($scope.myChart.view.columns[col]);

        $scope.reset = function() {
          for (var i = 0; i < hidden.length; i++) {
            var hiddenCol = hidden[i];
            $scope.myChart.view.columns[hiddenCol] = hiddenCol;
            $scope.myChart.options.colors[hiddenCol - 1] = $scope.myChart.options.defaultColors[hiddenCol - 1];

          }

          //$scope.myChart.view.columns[col] = col;
          //console.log($scope.myChart.view.columns[col]);

        }

        if ($scope.myChart.view.columns[col] == col) {
          //Replace the integer value with this object initializer.
          $scope.myChart.view.columns[col] = {
            //Take the label value and type from the existing column.
            label: $scope.myChart.data.cols[col].label,
            type: $scope.myChart.data.cols[col].type,
            //makes the new column a calculated column based on a function that returns null, 
            //effectively hiding the series.
            calc: function() {
              return null;
            }
          };
          //Change the series color to grey to indicate that it is hidden.
          //Uses color[col-1] instead of colors[col] because the domain column (in my case the date values)
          //does not need a color value.
          $scope.myChart.options.colors[col - 1] = '#CCCCCC';
        }
        //series is currently hidden, bring it back.
        else {
          console.log("Ran this.");
          //Simply reassigning the integer column index value removes the calculated column.
          $scope.myChart.view.columns[col] = col;
          console.log($scope.myChart.view.columns[col]);
          //I had the original colors already backed up in another array.  If you want to do this in a more
          //dynamic way (say if the user could change colors for example), then you'd need to have them backed
          //up when you switch to grey.
          $scope.myChart.options.colors[col - 1] = $scope.myChart.options.defaultColors[col - 1];
        }
      }
      $scope.serverId = chart1.data.rows[selectedItem.row].c[3].v;
      alert("serverid : " + $scope.serverId);


    };
  });

html代码:

<div ng-controller="myController">
    <div google-chart chart="myChart" on-select="seriesSelected(selectedItem)"></div></div>

如果网页上只显示一个图例数据,则需要通过选择图例来隐藏数据来限制用户。

2 个答案:

答案 0 :(得分:0)

这似乎对我有用......

var hidden = [];

$scope.seriesSelected = function(selectedItem) {

  if (hidden.length === 3) {
    window.alert("you can't remove all cols!");
    return 0;
  }

  var col = selectedItem.column;
  hidden.push(col);



  console.log(selectedItem);

  //If there's no row value, user clicked the legend.
  if (selectedItem.row === null) {
    //If true, the chart series is currently displayed normally.  Hide it.
    console.log($scope.myChart.view.columns[col]);

    $scope.reset = function() {
      for (var i = 0; i < hidden.length; i++) {
        var hiddenCol = hidden[i];
        $scope.myChart.view.columns[hiddenCol] = hiddenCol;
        $scope.myChart.options.colors[hiddenCol - 1] = $scope.myChart.options.defaultColors[hiddenCol - 1];

      }
      hidden = [];

      //$scope.myChart.view.columns[col] = col;
      //console.log($scope.myChart.view.columns[col]);

    }

答案 1 :(得分:0)

好的,你只需要控制隐藏的系列。在隐藏序列数组中添加或删除。

请检查this working example

重要的部分:

var colIndex = hidden.indexOf(col);
if (hidden.length === ($scope.myChart.view.columns.length-2) && colIndex == -1) {
        window.alert("you can't remove all cols!");
}
else{            
   if(colIndex == -1){
      hidden.push(col);
   }
   else{
      hidden.splice(colIndex, 1);
   }

并且您必须在清除图表时重置隐藏的数组:

$scope.reset = function() {
   for (var i = 0; i < hidden.length; i++) {
      var hiddenCol = hidden[i];
      $scope.myChart.view.columns[hiddenCol] = hiddenCol;
      $scope.myChart.options.colors[hiddenCol - 1] = $scope.myChart.options.defaultColors[hiddenCol - 1];
   }
   hidden = [];      
};