Question

我用nvd3创建了这个多图表。在背景中有3个区域图标有background1..3。我想只显示background1和background3乐队并跳过中间。是否有可能在乐队之间创造“差距”？我试图将中间带的颜色设置为白色，这可能是一个快速的解决方法，但在这种情况下，它仍然出现在顶部的图例列表中。我希望有一种方法可以做到这一点，没有任何解决方法。

以下是我当前版本的一名资料：

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
 $scope.options = {
            chart: {
                type: 'multiChart',
                height: 450,
                margin : {
                    top: 30,
                    right: 60,
                    bottom: 50,
                    left: 70
                },
                color: d3.scale.category10().range(),
                //useInteractiveGuideline: true,
                duration: 500,
                xAxis: {
                    tickFormat: function(d){
                        return d3.format(',f')(d);
                    }
                },
                yAxis1: {
                    tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }
                },
                yAxis2: {
                    tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }
                }
            }
        };

        $scope.data = generateData();

        function generateData(){
          return [{
                    type: 'bar',
                    yAxis: 1,
                    key: 'data',
                    values: [{
                        x: '2016-11-20T00:00:00.000Z',
                        y: 12
                    }, {
                        x: '2016-11-21T00:00:00.000Z',
                        y: 14
                    }, {
                        x: '2016-11-22T00:00:00.000Z',
                        y: 11
                    }]
                },{
                    type: 'area',
                    yAxis: 1,
                    key: 'background1',
                    values: [{
                        x: 0,
                        y: 5
                    }, {
                        x: 1,
                        y: 5
                    }]
                }, {
                    type: 'area',
                    yAxis: 1,
                    key: 'background2',
                    values: [{
                        x: 0,
                        y: 5
                    }, {
                        x: 1,
                        y: 5
                    }]
                }, {
                    type: 'area',
                    yAxis: 1,
                    key: 'background3',
                    values: [{
                        x: 0,
                        y: 5
                    }, {
                        x: 1,
                        y: 5
                    }]
                }]
        }

});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Multi Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css"/>    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.6/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <nvd3 options="options" data="data"></nvd3>
    
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
  </body>

</html>

是否有可能在nvd3中绘制带有间隙的堆积面积图？

0 个答案: