<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../angular.js"></script>

    <script src="../bower_components/d3/d3.js"></script>

    <script src="../bower_components/nvd3/build/nv.d3.js"></script>

    <script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script>

    <link rel="stylesheet" href="../bower_components/nvd3/build/nv.d3.css">

    <script>

        angular.module('myApp',['nvd3'])

            .controller('myCtrl',function($scope){

                $scope.options={

                    chart: {

                        type: 'discreteBarChart',

                        height: 450,

                        margin : {

                            top: 20,

                            right: 20,

                            bottom: 60,

                            left: 55

                        },

                        x: function(d){ return d.label; },

                        y: function(d){ return d.value; },

                        showValues: true,

                        valueFormat: function(d){

                            return d3.format(',.4f')(d);

                        },

                        transitionDuration: 500,

                        xAxis: {

                            axisLabel: 'X Axis'

                        },

                        yAxis: {

                            axisLabel: 'Y Axis',

                            axisLabelDistance: 30

                        }

                    }

                };

                $scope.data=[{

                                key: "Cumulative Return",

                                values: [

                                    { "label" : "A" , "value" : -29.765957771107 },

                                    { "label" : "B" , "value" : 0 },

                                    { "label" : "C" , "value" : 32.807804682612 },

                                    { "label" : "D" , "value" : 196.45946739256 },

                                    { "label" : "E" , "value" : 0.19434030906893 },

                                    { "label" : "F" , "value" : -98.079782601442 },

                                    { "label" : "G" , "value" : -13.925743130903 },

                                    { "label" : "H" , "value" : -5.1387322875705 }

                                ]

                            }];

            })

    </script>

</head>

<body ng-controller="myCtrl">

    <nvd3 options='options' data='data'></nvd3>

</body>

</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. 如何为ASP.NET Core设置客户端IP白名单验证

    原文链接:Client IP safelist for ASP.NET Core 作者:Damien Bowden and Tom Dykstra 译者:Lamond Lu 本篇博文中展示了如何在AS ...

  2. TabTopAutoTextSizeLayout【自定义文字字号区域（动态选项卡数据且可滑动）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...

  3. TypeScript 中非代码模块的导入

    需要理解的是,TypeScript 作为语言,他只处理代码模块.其他类型的文件这种非代码模块的导入,讲道理是通过另外的打包工具来完成的,比如 Web 应用中的图片,样式,JSON 还有 HTML 模板 ...

  4. Vmware虚拟机中CentOS7与Docker安装图文教程

    1.安装VMware 下载一个软件安装: 2.新建一个虚拟机 等待自动安装完成 配置系统语言: 配置系统时间: 配置系统键盘: 语言支持: 默认自动使用安装源: 配置软件环境,需要及时添加的软件,这里 ...

  5. InheritableThreadLocal类原理简介使用 父子线程传递数据详解 多线程中篇（十八）

      上一篇文章中对ThreadLocal进行了详尽的介绍,另外还有一个类: InheritableThreadLocal 他是ThreadLocal的子类,那么这个类又有什么作用呢?   测试代码 p ...

  6. 权限管理系统之SpringBoot集成LayUI实现后台管理首页

    万事开头难,昨天一直在构思用户权限管理系统怎么实现,实现哪些需求,采用什么技术等,也在网上百度了好多,计划使用SpringBoot + Mybatis + thymeleaf  + LayUI + S ...

  7. FeignClient注解及参数

    一.FeignClient注解 FeignClient注解被@Target(ElementType.TYPE)修饰,表示FeignClient注解的作用目标在接口上 1 2 3 4 5 @FeignC ...

  8. 10分钟 在linux里创建.net core helloworld控制台程序

    官方教程 安装linux https://www.cnblogs.com/LittleFeiHu/p/9749455.html 第一步 :选择和你本机适用的Linux版本,我这里用的是18.04. 第 ...

  9. 个人对【依赖倒置(DIP)】、【控制反转(IOC)】、【依赖注入(DI)】浅显理解

    一.依赖倒置(Dependency Inversion Principle) 依赖倒置是面向对象设计领域的一种软件设计原则.(其他的设计原则还有:单一职责原则.开放封闭原则.里式替换原则.接口分离原则 ...

  10. socket字符流循环截取

    场景:socket 客户端将一个单向链表序列化后发送给服务端,服务端将之解析,重新构建单向链表. Client.cpp //遍历链表,填充到缓冲区 ]) { ListNode* tmp = p; // ...