1
我正在使用可重複使用的NVD3 multibarchart,我有4個嚴重的和250多個類別。此圖表正在工作,但矩形非常小,一些標籤重疊。nvd3 multibarchart高度和標籤問題
出來看下面。
其中我使用的代碼是
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);
親愛的西里爾,感謝您的快速發現,我已經改正了我的數據,現在沒有重疊。 – sen
但我仍然無法增加酒吧的矩形高度。以及庫存和分組選項不起作用。請檢查相同的http://plnkr.co/edit/V4CTzSNIHkfftCxeZcXs?p=preview .. – sen
當您的第一個鍵有10個數據時,您無法制作堆疊圖表。第2個鍵具有大約20個數據值,等等。他們都需要有相同數量的數據。看到這裏http://plnkr.co/edit/vdYlaPCyc0S0v9VsUGjB?p=preview – Cyril