angular-nvd3

Simplify your work with nvD3 visualization via JSON approach. The key feature is that the original hierarchical structure of nvd3 models is completely preserved in the directive JSON structure. So it allows you to make a deep customization of charts.

安装

通过bower安装:

$ bower install angular-nvd3

An angular.js, D3.js and nvd3.js would be installed as a dependency automatically. If it won't for some reason, install it manually:

$ bower install angular
$ bower install d3
$ bower install nvd3

Add dependencies to the section of your main html:

<meta charset="utf-8">  <!-- it's important for d3.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/nvd3/nv.d3.js"></script> <!-- or use another assembly -->
<script src="bower_components/angular-nvd3/dist/angular-nvd3.js"></script>
<link rel="stylesheet" href="bower_components/nvd3/nv.d3.css">

If you don't use bower, you can manually download and unpack directive (zip, tar.gz).

基本用法

Inject nvd3 directive into angular module, set up some chart options and push some data to the controller:

angular.module('myApp', ['nvd3'])
    .controller('myCtrl', function($scope){

        /* Chart options */
        $scope.options = { /* JSON data */ };

        /* Chart data */
        $scope.data = { /* JSON data */ }

    })

and in html again you can use it like:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <nvd3 options="options" data="data"></nvd3>
    </div>
</div>

The chart would be displayed on the page.

实例

Basic configurations for options and sample data you can find by following the source code of the basic examples:

• Line Chart plunker
• Cumulative Line Chart plunker
• Stacked Area Chart plunker
• MultiBar Chart plunker
• DiscreteBar Chart plunker
• HistoricalBar Chart plunker
• MultiBar Horizontal Chart plunker
• Pie Chart plunker
• Scatter Chart plunker
• Line with Focus Chart plunker
• Scatter + Line Chart plunker
• Line + Bar with Focus Chart plunker
• Donut Chart plunker
• Bullet Chart plunker
• SparkLine Chart plunker
• Parallel Coordinates plunker
• Multi Chart plunker
• Candlestick Chart plunker
• Sunburst Chart plunker
• OHLC Chart plunker
• Box Plot Chart plunker

Other examples in plunker.

• Real-time chart updating
• Events handling in Discrete Bar Chart
• Dynamic chart synchronization with Firebase
• Selecting series in Cumulative Line Chart
• Charts in grid layout with FreewallJS
• Custom xAxis labels in Line+Bar+Focus chart
• Time delay while updating chart data
• Compile charts dynamically
• Creating multiple charts inside ng-repeat
• Stacked Multi Bar chart with random barColor
• Pie Chart with custom legend position and size

An example of creating a simple Discrete Bar Chart.

配置选项:

$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
        }
    }
};

And push some data:

$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 }
        ]
    }]

See the result.

属性

The most common way to define directive in html code is as follows:

<nvd3 options="options"
      data="data"
      config="config"
      events="events"
      api="api"></nvd3>

options and data are required attributes and used as above, the others are optional.

配置 [可选]

Setting up the global directive config in your controller like:

$scope.config = {
    visible: true, // default: true
    extended: false, // default: false
    disabled: false, // default: false
    autorefresh: true, // default: true
    refreshDataOnly: false, // default: false
    deepWatchOptions: true, // default: true
    deepWatchData: false, // default: false
    deepWatchConfig: true, // default: true
    debounce: 10 // default: 10
};

You can also set configuration directly in html like:

<nvd3 options="options" data="data" config="{ extended: true, disabled: true }"></nvd3>

events [可选]

Directive can be subscribed to any global event through this attribute. Say, for example, you need to do smth with directive after 'someEvent1' or 'someEvent2' arised. You can add this attribute and push event handlers right into directive like:

$scope.events = {
    someEvent1: function(e, scope){
        /* do smth, scope - is internal directive scope */
    },
    someEvent2: function(e, scope){
        /* do smth, scope - is internal directive scope */
    },
};

Then you can, for example, manually broadcast event like:

$scope.$broadcast('someEvent1');

This will trigger directive.

api [可选]

Using this attribute you can access a global directive api (this is not a chart api).

You can, for example, refresh your directive from controller like:

$scope.api.refresh();

Wrapper

Configuring with Title, Subtitle and Caption.

Events

Configuring with events