根据选择显示结果 - js

我正在研究谷歌柱状图。需求是基于单选按钮选择，我需要显示图表中的堆积列。当选中单选按钮时，我不应该在列图中显示运输堆栈，但在鼠标悬停运输时，应该显示详细信息。演示plunker：click here 根据选择显示结果 - js

的html代码：

<html ng-app="myApp"> 

<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
    <script type="text/javascript" src="ng-google-chart.js"></script> 
    <title>Angular-Google-Charts Example</title> 
</head> 

<body> 
    <div ng-controller="myController"> 
<div> <tr> 
    <td>ALL <input type="radio" ng-model="value" value="all" ng-checked="true" ng-change='newValue(value)'> &nbsp;&nbsp;&nbsp; 
     SDL(server,desktop,laptop): <input type="radio" ng-model="value" value="few" ng-change='newValue(value)'> 
    </td> 
     </tr></div> 

    <div google-chart chart="myChart"></div> 
    </div> 
</body>

JS代码：

angular.module('myApp', ['googlechart']) 
    .controller('myController', function($scope) { 
     $scope.newValue = function(value) { 
     alert("change : " + value); 
     console.log(value); 
    } 

    var chart1 = {}; 
    chart1.type = "ColumnChart"; 
    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", 
     "isStacked": "true", 
     "fill": 20, 
     focusTarget: 'category', 
     "displayExactValues": true, 
     "vAxis": { 
     "title": "Sales unit", 
     "gridlines": { 
      "count": 10 
     } 
     }, 
     "hAxis": { 
     "title": "Date" 
     } 
    }; 
    $scope.myChart = chart1; 
    }).value('googleChartApiConfig', { 
    version: '1.1', 
    optionalSettings: { 
     packages: ['bar'], 
     language: 'en' 
    } 
    });

任何建议将是有益的。默认情况下，所有单选按钮被选中，它应该显示柱状图中的所有堆积条，但是当用户选择几个单选按钮时，应该隐藏“运送堆叠条”，但是在鼠标上方应该显示在工具提示上。

来源

2017-08-04 user8401182

请看看在plnkr，我想这是你所需要的

var variableCol = { 
     id: "cost-id", 
     label: "Shipping", 
     type: "number" 
    }; 

if (value == 'few' && chart1.data.cols.length == 5) { 
      chart1.data.cols.pop(); 
     } else { 
      chart1.data.cols.push(variableCol); 
     }

有关鼠标悬停显示数据，你可以去thorugh谷歌图表，如果它提供了一些选择，因为我还没有工作的谷歌图表。

但是，如果谷歌图表没有提供任何选项，你可能会创建一个指令来处理鼠标输入和鼠标离开事件的元素具有谷歌图表指令和更新chart1.data.cols鼠标进入和离开事件在该指令。

来源

2017-08-04 04:16:46 Harpreet

如果您不想创建自定义指令，您还可以使用ng-mouseenter和ng-mouseleave指令的角度 – Harpreet

请查找演示https://plnkr.co/edit/J8I4ZSrIjAj5Wp2gEUEs?p=preview，我想要根据您的建议隐藏笔记本电脑的数据。请建议。@ Harpreet – user8401182

我认为有两种类型的笔记本电脑数据，其中一种类型隐藏了写入代码的内容，意味着代码按照我的理解行事，或者您可以详细阐述您的查询 – Harpreet

根据选择显示结果 - js

回答

相关问题