1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="../angular.js"></script>
  9.     <script src="../bower_components/d3/d3.js"></script>
  10.     <script src="../bower_components/nvd3/build/nv.d3.js"></script>
  11.     <script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script>
  12.     <link rel="stylesheet" href="../bower_components/nvd3/build/nv.d3.css">
  13.     <script>
  14.         angular.module('myApp',['nvd3'])
  15.             .controller('myCtrl',function($scope){
  16.                 $scope.options={
  17.                     chart: {
  18.                         type: 'discreteBarChart',
  19.                         height: 450,
  20.                         margin : {
  21.                             top: 20,
  22.                             right: 20,
  23.                             bottom: 60,
  24.                             left: 55
  25.                         },
  26.                         x: function(d){ return d.label; },
  27.                         y: function(d){ return d.value; },
  28.                         showValues: true,
  29.                         valueFormat: function(d){
  30.                             return d3.format(',.4f')(d);
  31.                         },
  32.                         transitionDuration: 500,
  33.                         xAxis: {
  34.                             axisLabel: 'X Axis'
  35.                         },
  36.                         yAxis: {
  37.                             axisLabel: 'Y Axis',
  38.                             axisLabelDistance: 30
  39.                         }
  40.                     }
  41.                 };
  42.                 $scope.data=[{
  43.                                 key: "Cumulative Return",
  44.                                 values: [
  45.                                     { "label" : "A" , "value" : -29.765957771107 },
  46.                                     { "label" : "B" , "value" : 0 },
  47.                                     { "label" : "C" , "value" : 32.807804682612 },
  48.                                     { "label" : "D" , "value" : 196.45946739256 },
  49.                                     { "label" : "E" , "value" : 0.19434030906893 },
  50.                                     { "label" : "F" , "value" : -98.079782601442 },
  51.                                     { "label" : "G" , "value" : -13.925743130903 },
  52.                                     { "label" : "H" , "value" : -5.1387322875705 }
  53.                                 ]
  54.                             }];
  55.             })
  56.     </script>
  57. </head>
  58. <body ng-controller="myCtrl">
  59.     <nvd3 options='options' data='data'></nvd3>
  60. </body>
  61. </html>

angular-nvd3初体验的更多相关文章

  1. day21—AngularJS学习初体验

    转行学开发,代码100天——2018-04-06 今天按照学习计划安排,开始AngularJS的学习. 关于AngularJS,在菜鸟教程上这样介绍 好吧,Angular学习起来非常简单,哈哈,现在就 ...

  2. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  3. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  4. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  5. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  6. .NET Core 初体验

    .NET Core 作为微软的开源项目,neter 们对之的期待还是挺大的. 以前也看过,接触过,摸索建了几个示例项目,今天就罗列下自己的初体验. .NET Core 安装.帮助等 安装的话,直接官网 ...

  7. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  8. Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  9. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  10. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

随机推荐

  1. Python爬虫入门教程 45-100 Charles抓取兔儿故事-下载小猪佩奇故事-手机APP爬虫部分

    1. Charles抓取兔儿故事背景介绍 之前已经安装了Charles,接下来我将用两篇博客简单写一下关于Charles的使用,今天抓取一下兔儿故事里面关于小猪佩奇的故事. 爬虫编写起来核心的重点是分 ...

  2. 利用shell脚本生成CHANGELOG.md（包含git提交规范）

    前言 我们经常看到github上面有很多CHANGELOG.MD包含版本的更新信息,如果我们的git提交能遵循一定的规范,那么使用gitlog就能很方便的生成它 生成结果  shell脚本 http ...

  3. 微信公众号开发C#系列-4、获取接口调用凭证

    概述 获取接口调用凭证实质就是获取access_token.在微信接口开发中,许多服务的使用都离不开Access Token,Access Token相当于打开这些服务的钥匙,正常情况下会在7200秒 ...

  4. 【大数据安全】Apache Kylin 安全配置(Kerberos)

    1. 概述 本文首先会简单介绍Kylin的安装配置,然后介绍启用Kerberos的CDH集群中如何部署及使用Kylin. Apache Kylin™是一个开源的分布式分析引擎,提供Hadoop/Spa ...

  5. Linux磁盘管理及LVM讲解（week2_day2）--技术流ken

    硬盘接口 从整体的角度上,硬盘接口分为IDE.SATA.SCSI和SAS四种,IDE接口硬盘多用于家用产品中,也部分应用于服务器,SCSI接口的硬盘则主要应用于服务器市场,而SAS只在高端服务器上,价 ...

  6. c#封装DBHelper类

    public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> None, /// <s ...

  7. 如何利用GitHub设计一个炫酷的个人网站（含代码）

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

  8. DVWA 黑客攻防实战（十五） 绕过内容安全策略 Content Security Policy (CSP) Bypass

    看到标题,是否有点疑惑 CPS 是什么东东.简单介绍一下就是浏览器的安全策略,如果 标签,或者是服务器中返回 HTTP 头中有 Content-Security-Policy 标签 ,浏览器会根据标签 ...

  9. Aspnet mvc移除WebFormViewEngine

    为了提高mvc的速度,在Global.asax中移除WebFormViewEngine protected void Application_Start() { RemoveWebFormEngine ...

  10. Oracle 安装步骤、安装中错误处理、完整卸载

    /*************************************************以下ORACLE服务端安装************************************* ...