zoukankan html css js c++ java

angular-nvd3初体验

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

查看全文

相关阅读:
对于JavaScript中this关键字的理解
 使用DOM对表格进行增删
 sql server 存储过程
 sql sever 基础练习题
 sql sever 基础建表
 第十章嵌入式的Linux调试技术
 第九章硬件抽象层 HAL
第八章蜂鸣器驱动
 LED：控制发光二极管
 第一个Linux驱动程序：统计单词个数

原文地址：https://www.cnblogs.com/em2464/p/10530971.html