Question

我正在研究谷歌列图表。要求基于单选按钮选择，我需要在图表中显示堆积的列。当选择单选按钮时，我不应该在柱形图中显示装运堆栈，但是在鼠标悬停时会显示装运，并且应显示详细信息。演示人员：click here

html代码：

$dbh = new PDO($dsn, $username, $password);
$stmt = $dbh->query($query);
$array = $stmt->fetch();
$stmt->closeCursor();

js code：

<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>

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

Answer 1

请查看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);
        }

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

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

根据选择显示结果 - js

1 个答案: