Question

我正在使用可重复使用的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);

Answer 1

重叠是因为：在一个关键示例中就绪：

标签155

值2

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

以后值155

值1

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

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

修复：

确保对于标签，给定密钥只有一个值。
增加svg的大小，例如here

nvd3多标准高度和标签问题

1 个答案: