Javascript 显示基于选择的结果-js_Javascript_Html

Javascript 显示基于选择的结果-js

javascript html

Javascript 显示基于选择的结果-js,javascript,html,Javascript,Html,我在谷歌柱形图上工作。要求基于单选按钮选择，我需要在图表中显示堆叠的柱。当选择单选按钮“少数”时，我不应该在柱状图中显示装运堆栈，而是应该在鼠标上显示装运及其详细信息。演示plunker： html代码： <html ng-app="myApp"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/a

我在谷歌柱形图上工作。要求基于单选按钮选择，我需要在图表中显示堆叠的柱。当选择单选按钮“少数”时，我不应该在柱状图中显示装运堆栈，而是应该在鼠标上显示装运及其详细信息。演示plunker：

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>

任何建议都会有帮助。默认情况下，选择“所有”单选按钮，它应显示柱形图中的所有堆叠条，但当用户选择几个单选按钮时，“装运堆叠条”应隐藏，但鼠标悬停时，它应显示在工具提示上。

请查看，我想这是您需要的

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

要在鼠标悬停时显示数据，您可以浏览谷歌图表，如果它提供了一些选项，因为我没有在谷歌图表上工作过

但是，如果google chart不提供任何选项，您可以在具有google chart指令的元素上创建一个指令来处理鼠标输入和鼠标离开事件，并更新该指令中鼠标输入和离开事件的chart1.data.cols。

如果您不想，您也可以使用angular的ng mouseenter和ng mouseleave指令创建自定义指令请查找演示，我想隐藏笔记本电脑的数据，该笔记本电脑无法按照您的建议工作。请提出建议。@HarpreetI认为有两种类型的笔记本电脑数据，其中一种类型是隐藏代码，这意味着根据我的理解，代码的行为符合预期，或者您可以详细说明您的查询

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