javascript代碼限制用戶點擊/提交時達到極限

Question

我正在谷歌圖表角度application.Scenario是當用戶點擊圖表的圖例，相應的數據隱藏在圖表上。我想限制數據的隱藏，以便在沒有數據的情況下圖表不是空白的。至少有一系列數據應該可見。用戶可以選擇圖例並只隱藏3個圖例數據，當用戶選擇第4個圖例時，我需要顯示一條警告「無法隱藏圖表的整個數據」，並停止隱藏該圖例的數據。

上述工作樣品https://plnkr.co/edit/OBsZFO8LerlKcWAu65sZ?p=preview

在該示例中，用戶可以能夠隱藏所有傳說的數據和圖表區會是空白的。我需要進行限制，以便圖表上始終顯示一個圖例數據。任何輸入都會有幫助。

js代碼：

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> 

需要通過選擇圖例來隱藏數據，如果在網頁上僅示出一個說明數據來限制用戶。

Answer 1

好吧，你只需要保持隱藏的一系列控制。添加或刪除隱藏系列的數組。

請檢查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 = [];  
}; 

Answer 2

這似乎爲我工作...

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

    }