nvd3多条形图高度和标签问题答案

【问题标题】：nvd3 multibarchart height and label issuenvd3多条形图高度和标签问题
【发布时间】：2016-07-10 02:59:38
【问题描述】：

我正在使用可重复使用的 NVD3 多条形图，我有 4 个严重类别和 250 多个类别。该图表可以正常工作，但矩形非常小，并且一些标签重叠。

出处见下文。

我使用的代码是

var data =  [{"key":"Ready","total":135,"values":[{"label":"111","value":1},{"label":"136","value":1},{"label":"155","value":2},{"label":"525","value":2},{"label":"RD ","value":7},    {"label":"601","value":3},{"label":"624","value":2},{"label":"155","value":1},{"label":"ADC","value":2},{"label":"177","value":2},{"label":"152","value":2},{"label":"026","value":3},    {"label":"623","value":2},{"label":"800","value":1},{"label":"067","value":2},{"label":"096","value":2},{"label":"133","value":1},{"label":"Mer","value":1},{"label":"Mer","value":2},{"label":"050","value":1},{"label":"138","value":1},{"label":"098","value":4},{"label":"080","value":2},{"label":"010","value":1},{"label":"034","value":1},{"label":"069","value":1},{"label":"020","value":1},{"label":"060","value":1},{"label":"037","value":1},{"label":"006","value":3},{"label":"167","value":2},{"label":"117","value":1},{"label":"143","value":1},{"label":"IDP","value":1},{"label":"185","value":1},{"label":"575","value":2},{"label":"146","value":2},{"label":"173","value":1},{"label":"171","value":3},{"label":"633","value":1},{"label":"010","value":4},{"label":"040","value":2},{"label":"068","value":2},{"label":"175","value":2},{"label":"054","value":3},{"label":"096","value":1},{"label":"096","value":5},{"label":"154","value":2},{"label":"050","value":7},{"label":"096","value":4},{"label":"096","value":2},{"label":"034","value":3},{"label":"069","value":2},{"label":"020","value":2},{"label":"060","value":3},{"label":"118","value":1},{"label":"164","value":3},{"label":"415","value":3},{"label":"138","value":3},{"label":"126","value":1},{"label":"037","value":2},{"label":"065","value":3},{"label":"157","value":2},{"label":"SCC","value":2}]},{"key":"Not Started","total":19890,"values":[{"label":"111","value":22},{"label":"136","value":216},{"label":"155","value":300},{"label":"525","value":174},{"label":"RD ","value":1253},{"label":"601","value":797},{"label":"624","value":271},{"label":"155","value":60},{"label":"ADC","value":272},{"label":"177","value":159},{"label":"152","value":426},{"label":"026","value":519},{"label":"623","value":562},{"label":"800","value":69},{"label":"067","value":643},{"label":"096","value":135},{"label":"133","value":272},{"label":"Mer","value":97},{"label":"Mer","value":303},{"label":"050","value":119},{"label":"138","value":54},{"label":"098","value":644},{"label":"080","value":384},{"label":"010","value":121},{"label":"034","value":21},{"label":"069","value":99},{"label":"020","value":42},{"label":"060","value":31},{"label":"037","value":54},{"label":"006","value":337},{"label":"167","value":303},{"label":"117","value":221},{"label":"143","value":88},{"label":"IDP","value":282},{"label":"185","value":102},{"label":"575","value":313},{"label":"146","value":139},{"label":"173","value":93},{"label":"171","value":210},{"label":"633","value":103},{"label":"010","value":733},{"label":"040","value":356},{"label":"068","value":475},{"label":"175","value":301},{"label":"054","value":466},{"label":"096","value":42},{"label":"096","value":739},{"label":"154","value":295},{"label":"050","value":679},{"label":"096","value":423},{"label":"096","value":165},{"label":"034","value":380},{"label":"069","value":350},{"label":"020","value":560},{"label":"060","value":665},{"label":"118","value":112},{"label":"164","value":762},{"label":"415","value":174},{"label":"138","value":346},{"label":"126","value":101},{"label":"037","value":346},{"label":"065","value":563},{"label":"157","value":416},{"label":"SCC","value":131}]},{"key":"Obsolet","total":861,"values":[{"label":"111","value":1},{"label":"136","value":16},{"label":"155","value":16},{"label":"525","value":3},{"label":"RD ","value":32},{"label":"601","value":23},{"label":"624","value":17},{"label":"155","value":1},{"label":"ADC","value":10},{"label":"177","value":5},{"label":"152","value":23},{"label":"026","value":25},{"label":"623","value":25},{"label":"800","value":1},{"label":"067","value":31},{"label":"096","value":3},{"label":"133","value":14},{"label":"Mer","value":1},{"label":"Mer","value":9},{"label":"050","value":2},{"label":"138","value":2},{"label":"098","value":15},{"label":"080","value":9},{"label":"010","value":7},{"label":"069","value":7},{"label":"020","value":5},{"label":"006","value":16},{"label":"167","value":23},{"label":"117","value":8},{"label":"143","value":5},{"label":"IDP","value":20},{"label":"185","value":10},{"label":"575","value":22},{"label":"146","value":12},{"label":"173","value":2},{"label":"171","value":12},{"label":"633","value":7},{"label":"010","value":27},{"label":"040","value":21},{"label":"068","value":23},{"label":"175","value":19},{"label":"054","value":19},{"label":"096","value":1},{"label":"096","value":26},{"label":"154","value":18},{"label":"050","value":31},{"label":"096","value":19},{"label":"096","value":10},{"label":"034","value":21},{"label":"069","value":21},{"label":"020","value":26},{"label":"060","value":22},{"label":"118","value":7},{"label":"164","value":19},{"label":"415","value":8},{"label":"138","value":17},{"label":"126","value":6},{"label":"037","value":15},{"label":"065","value":22},{"label":"157","value":17},{"label":"SCC","value":6}]},{"key":"Started","total":379,"values":[{"label":"111","value":2},{"label":"136","value":8},{"label":"155","value":5},{"label":"525","value":6},{"label":"RD ","value":9},{"label":"601","value":5},{"label":"624","value":5},{"label":"155","value":4},{"label":"ADC","value":5},{"label":"177","value":5},{"label":"152","value":6},{"label":"026","value":6},{"label":"623","value":8},{"label":"800","value":5},{"label":"067","value":10},{"label":"096","value":7},{"label":"133","value":5},{"label":"Mer","value":4},{"label":"Mer","value":9},{"label":"050","value":1},{"label":"138","value":1},{"label":"098","value":11},{"label":"080","value":5},{"label":"010","value":1},{"label":"069","value":3},{"label":"060","value":1},{"label":"006","value":10},{"label":"167","value":5},{"label":"117","value":7},{"label":"143","value":4},{"label":"IDP","value":5},{"label":"185","value":4},{"label":"575","value":7},{"label":"146","value":4},{"label":"173","value":5},{"label":"171","value":5},{"label":"633","value":4},{"label":"010","value":7},{"label":"040","value":7},{"label":"068","value":7},{"label":"175","value":5},{"label":"054","value":10},{"label":"096","value":5},{"label":"096","value":15},{"label":"154","value":6},{"label":"050","value":10},{"label":"096","value":11},{"label":"096","value":11},{"label":"034","value":8},{"label":"069","value":7},{"label":"020","value":9},{"label":"060","value":8},{"label":"118","value":4},{"label":"164","value":8},{"label":"415","value":7},{"label":"138","value":6},{"label":"126","value":4},{"label":"037","value":5},{"label":"065","value":8},{"label":"157","value":7},{"label":"SCC","value":7}]}];





(function(data) {
 nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .forceY([0])// To make 10 to be starting point.
    //.margin({top: 30, right: 20, bottom: 50, left: 175})
    .showValues(true)
    .height(2500)
    .showControls(true);        
chart.yAxis.tickFormat(d3.format(','));
d3.select('#chart1 svg')
    .datum(data)
    .call(chart)
    .attr('height', 5500);
nv.utils.windowResize(chart.update);

return chart;

});})(data);

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

重叠是因为：在一个关键的例子中Ready：

标签 155

具有 值 2

{
    "label": "155",
    "value": 2
}

后来它的 value 1 为 value 155

, {
    "label": "155",
    "value": 1
  }

这是重叠的原因（它试图在标签 155 上显示 2 和 1）。

修复：

确保标签的给定键只有一个值。
增加 svg 的大小，如 here

【讨论】：

亲爱的 Cyril，感谢您的快速发现，我已经更正了我的数据，现在没有重叠。
但我仍然无法增加条形的矩形高度。以及库存和分组选项不起作用。请检查相同的plnkr.co/edit/V4CTzSNIHkfftCxeZcXs?p=preview..
当您的第一个键有大约 10 个数据时，您无法制作堆叠图表。第二个键有大约 20 个数据值等等......它们都需要具有相同数量的数据。见这里plnkr.co/edit/vdYlaPCyc0S0v9VsUGjB?p=preview