钉钉小程序使用charts_使用Google Charts API和AngularJS创建可视化应用程序–第4部分...

最新推荐文章于 2023-10-09 09:23:33 发布

dingshi7798

最新推荐文章于 2023-10-09 09:23:33 发布

阅读量224

点赞数

文章标签：可视化 angularjs bootstrap 数据可视化 jquery ViewUI

原文链接：https://www.sitepoint.com/creating-visualization-app-using-google-charts-api-angularjs-part4/

版权

钉钉小程序使用charts

在本系列的第一，第二和第三部分中，我们重点介绍了AngularJS的各个方面，例如指令，控制器，作用域和双向数据绑定功能。在本系列的最后一部分中，我们将学习如何基于Twitter Bootstrap的标记和UI Bootstrap中的 CSS集成AngularJS指令。

引导应用

首先，让我们使用Twitter Bootstrap使我们的应用程序外观整洁。我们将使用入门模板。这是入门模板html，我们将其命名为bootstrap_index.html 。

<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>

  <title>Starter Template for Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet"/>

  <!-- Custom styles for this template -->
  <link href="css/starter-template.css" rel="stylesheet"/>

</head>

<body>

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>

  <div class="container">

    <div class="starter-template">
      <h1>Visualization App Using AngularJS</h1>
      <hr />
    </div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="lib/common/bootstrap.min.js"></script>
</body>

</html>

将其放置在与index.html相同的目录中。还要确保将bootstrap.min.css ， starter_template.css和bootstrap.min.js文件复制到各自的文件夹中。

在终端中，键入：

node scripts/web-server.js

然后将浏览器指向http://localhost:5000/app/bootstrap_index.html 。您应该看到入门模板。

引导选项卡

现在，我们将从AngularJS Bootstrap添加一个Tab指令。首先，将ui.bootstrap模块添加到我们的应用程序中。打开app/js/app.js并添加ui.bootstrap模块。这是修改后的app.js ：

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers',
  'ui.bootstrap'
]).
config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.when('/view1', {
      templateUrl: 'partials/partial1.html',
      controller: 'MyCtrl1'
    });
    $routeProvider.when('/', {
      templateUrl: 'index.html',
      controller: 'MyCtrl1'
    });
    $routeProvider.otherwise({
      redirectTo: '/view1'
    });
  }
]);

从UI Bootstrap下载ui-bootstrap-tpls-0.10.0.js并将其包含在bootstrap_index.html 。在bootstrap_index.html还包括我们在index.html中包含的所有脚本。为了添加标签，只需在bootstrap_index.html添加以下代码

<div>
  <tabset>
    <tab heading="Welcome">
      <h4>AngularJS Data Visualization App</h4>
    </tab>
    <tab heading="Visualization">Data Visualization</tab>

  </tabset>
</div>

修改后的bootstrap_index.html如下所示：

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">


  <title>Starter Template for Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/starter-template.css" rel="stylesheet">

</head>

<body>

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>

  <div class="container">

    <div class="starter-template">
      <h1>Visualization App Using AngularJS</h1>
      <hr/>
    </div>
    <div>
      <tabset>
        <tab heading="Welcome">
          <h4>AngularJS Data Visualization App</h4>
        </tab>
        <tab heading="Visualization">Data Visualization</tab>

      </tabset>
    </div>
  </div>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="lib/common/bootstrap.min.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/common/ui-bootstrap-tpls-0.10.0.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>

</html>

重新启动节点服务器，然后将浏览器指向http://localhost:5000/app/bootstrap_index.html以查看引导程序选项卡。

接下来，我们将index.html集成到bootstrap_index.html的第二个选项卡中。在index.html ，将代码复制到正文中，并添加一个div容器。它看起来应该像这样：

<div ng-controller="MyCtrl1">
  <div g-chart></div>
  <select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
  </select>
  <div>Angular seed app: v<span app-version></span>
  </div>
</div>

如您所见，还有一个额外的div ，用于定义该部分的控制器逻辑。在bootstrap_index.html ，将其粘贴到：

<tab heading="Visualization">Data Visualization</tab>

现在看起来应该像这样：

<tab heading="Visualization">
  <div ng-controller="MyCtrl1">
    <div g-chart></div>
    <select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
    </select>
    <div>Angular seed app: v<span app-version></span>
    </div>
  </div>
</tab>

重新启动节点服务器后，将浏览器指向http://localhost:5000/app/bootstrap_index.html 。您应该在可视化选项卡中看到数据可视化部分。

自举下拉菜单

到目前为止，我们一直使用HTML下拉列表选择图表类型。让我们也自举下拉列表。用以下HTML代码替换现有的select控件：

<li class="dropdown">
  <a class="dropdown-toggle">
    Change Chart Type
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="type in chartTypes">
      <a>{{type.typeName}}</a>
    </li>
  </ul>
</li>

重新启动服务器，刷新浏览器，您应该看到一个链接标题Change Chart Type，而不是下拉列表。如果单击它，它将展开为一个漂亮的下拉列表。但是，它不能完全发挥作用。因此，让我们使其起作用。

首先，我们需要将默认图表类型设置为显示，而不是更改图表类型。打开app/js/controllers.js并在MyCtrl1控制器中声明另一个名为chart.typeName变量。

chart.typeName = $scope.chartTypes[0].typeName;

接下来，如下所示在selectType函数中设置其值。

$scope.selectType = function (type) {
  $scope.chart.type = type.typeValue;
  $scope.chart.typeName = type.typeName;
}

接下来，修改下拉HTML代码，如下所示。

<li class="dropdown">
  <a class="dropdown-toggle">
    {{chart.typeName}}
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="type in chartTypes">
      <a ng-click="selectType(type)">{{type.typeName}}</a>
    </li>
  </ul>
</li>

现在，从“可视化”选项卡的下拉列表中选择一个图表类型将导致图表发生变化。

结论

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

在本教程中，我们专注于在Angular应用程序中使用由AngularUI团队创建的两个AngularJS指令。您可以在此处尝试其他指令。同时，演示代码可在GitHub上获得。 Heroku上还提供了一个现场演示。

翻译自: https://www.sitepoint.com/creating-visualization-app-using-google-charts-api-angularjs-part4/

钉钉小程序使用charts

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
钉钉小程序使用charts_使用Google Charts API和AngularJS创建可视化应用程序–第4部分...

钉钉小程序使用charts 在本系列的第一，第二和第三部分中，我们重点介绍了AngularJS的各个方面，例如指令，控制器，作用域和双向数据绑定功能。在本系列的最后一部分中，我们将学习如何基于Twitter Bootstrap的标记和UI Bootstrap中的 CSS集成AngularJS指令。引导应用首先，让我们使用Twitter Bootstrap使我们的应用程序外观整洁。...
复制链接

扫一扫