堆积条形图之间有空格，y0从错误的位置开始？

时间：2016-12-20 14:16:03

标签： javascript d3.js nvd3.js

我在nvd3中遇到这种奇怪的行为，我在堆积条形图上的条形图之间有一个空白区域，如下所示：

enter image description here

我在html上的数据显示如下：

[
  {
    "color": "#7C97B7", 
    "key": "Both", 
    "values": [
      {
        "key": "Both", 
        "series": 0, 
        "size": 1, 
        "values": 1, 
        "x": 2015, 
        "y": 1, 
        "y0": 0, 
        "y1": 1
      }, 
      {
        "key": "Both", 
        "series": 0, 
        "size": 1, 
        "values": 1, 
        "x": 2016, 
        "y": 1, 
        "y0": 0, 
        "y1": 1
      }, 
      {
        "key": "Both", 
        "series": 0, 
        "size": 1, 
        "values": 1, 
        "x": 2017, 
        "y": 1, 
        "y0": 0, 
        "y1": 1
      }, 
      {
        "key": "Both", 
        "series": 0, 
        "size": 0, 
        "values": 0, 
        "x": 2018, 
        "y": 0, 
        "y0": 0, 
        "y1": 0
      }, 
      {
        "key": "Both", 
        "series": 0, 
        "size": 0, 
        "values": 0, 
        "x": 2019, 
        "y": 0, 
        "y0": 0, 
        "y1": 0
      }
    ]
  }, 
  {
    "color": "#FF0000", 
    "key": "Unknown", 
    "values": [
      {
        "key": "Unknown", 
        "series": 1, 
        "size": 2, 
        "values": 2, 
        "x": 2015, 
        "y": 2, 
        "y0": 1, 
        "y1": 3
      }, 
      {
        "key": "Unknown", 
        "series": 1, 
        "size": 2, 
        "values": 2, 
        "x": 2016, 
        "y": 2, 
        "y0": 1, 
        "y1": 3
      }, 
      {
        "key": "Unknown", 
        "series": 1, 
        "size": 1, 
        "values": 1, 
        "x": 2017, 
        "y": 1, 
        "y0": 1, 
        "y1": 2
      }, 
      {
        "key": "Unknown", 
        "series": 1, 
        "size": 0, 
        "values": 0, 
        "x": 2018, 
        "y": 0, 
        "y0": 0, 
        "y1": 0
      }, 
      {
        "key": "Unknown", 
        "series": 1, 
        "size": 0, 
        "values": 0, 
        "x": 2019, 
        "y": 0, 
        "y0": 0, 
        "y1": 0
      }
    ]
  }, 
  {
    "color": "#ff7f0e", 
    "key": "Cloud", 
    "values": [
      {
        "key": "Cloud", 
        "series": 2, 
        "size": 1, 
        "values": 1, 
        "x": 2016, 
        "y": 1, 
        "y0": 3, 
        "y1": 4
      }, 
      {
        "key": "Cloud", 
        "series": 2, 
        "size": 2, 
        "values": 2, 
        "x": 2017, 
        "y": 2, 
        "y0": 3, 
        "y1": 5
      }, 
      {
        "key": "Cloud", 
        "series": 2, 
        "size": 3, 
        "values": 3, 
        "x": 2018, 
        "y": 3, 
        "y0": 2, 
        "y1": 5
      }, 
      {
        "key": "Cloud", 
        "series": 2, 
        "size": 3, 
        "values": 3, 
        "x": 2019, 
        "y": 3, 
        "y0": 0, 
        "y1": 3
      }, 
      {
        "key": "Cloud", 
        "series": 2, 
        "size": 0, 
        "values": 0, 
        "x": 2015, 
        "y": 0, 
        "y0": 0, 
        "y1": 0
      }
    ]
  }
]

然后我输入控制器图表的数据是：

[
    {
      "color": "#7C97B7", 
      "key": "Both", 
      "values": [
        {
          "values": 1, 
          "x": 2015
        }, 
        {
          "values": 1, 
          "x": 2016
        }, 
        {
          "values": 1, 
          "x": 2017
        }, 
        {
          "values": 0, 
          "x": 2018
        }, 
        {
          "values": 0, 
          "x": 2019
        }
      ]
    }, 
    {
      "color": "#FF0000", 
      "key": "Unknown", 
      "values": [
        {
          "values": 2, 
          "x": 2015
        }, 
        {
          "values": 2, 
          "x": 2016
        }, 
        {
          "values": 1, 
          "x": 2017
        }, 
        {
          "values": 0, 
          "x": 2018
        }, 
        {
          "values": 0, 
          "x": 2019
        }
      ]
    }, 
    {
      "color": "#ff7f0e", 
      "key": "Cloud", 
      "values": [
        {
          "values": 1, 
          "x": 2016
        }, 
        {
          "values": 2, 
          "x": 2017
        }, 
        {
          "values": 3, 
          "x": 2018
        }, 
        {
          "values": 3, 
          "x": 2019
        }, 
        {
          "values": 0, 
          "x": 2015
        }
      ]
    }
  ]

我的图表选项如下所示：

$scope.options_scn_cst_compare = {
    chart: {
        type: multiBarChart,
        showControls: true,
        groupSpacing: .2,
        height: 450,
        margin: {
            top: 20,
            right: 20,
            bottom: 45,
            left: 90
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.values; },
        dispatch: {
            stateChange: function(e){ console.log("stateChange"); },
            changeState: function(e){ console.log("changeState"); },
            tooltipShow: function(e){ console.log("tooltipShow"); },
            tooltipHide: function(e){ console.log("tooltipHide"); }
        },
        clipEdge: true,
        duration: 500,
        stacked: true,
        xAxis: {
            axisLabel: xLbl(),
            showMaxMin: true,
            tickFormat: function(d) {

                    if (yAxistm === 'yr') {

                        return d;

                    } else if (yAxistm === 'qtr') {

                        var dt = parseInt(d);
                        return d3.time.format('%b %y')(new Date(dt));

                    } else if (yAxistm === 'mth') {

                        var dt = parseInt(d);
                        return d3.time.format('%b %y')(new Date(dt));

                    };

                }
            },
        yAxis: {
            axisLabel: "Cost",
            axisLabelDistance: 30,
            tickFormat: function(d){
                return d3.format('$,f')(d);
            },
        },
        callback: function(chart){}
    },
    title: {
            enable: true,
            text: ttlLblCst()
        },
        subtitle: {
            enable: false,
            text: 'Put your Subtitle here.',
            css: {
                'text-align': 'center',
                'margin': '10px 13px 0px 7px'
            }
        },
    caption: {
        enable: false,
        html: 'Put your Caption Here.',
        css: {
            'text-align': 'justify',
            'margin': '10px 13px 0px 7px'
        }
    }

};

看起来y0因某种原因在错误的位置开始......

1 个答案:

答案 0 :(得分：1)

我使用lodash添加了这样的排序，似乎已经修复了它...... 

[remote "origin"]
     url = ssh://localhost:29418/test.git
相关问题
最新问题