0
Ich erhalte dieses seltsame Verhalten in nvd3 wo ich einen weißen Raum haben zwischen den Balken auf einer gestapeltes Balkendiagramm, die wie folgt aussehen:gestapeltes Balkendiagramm hat Leerraum dazwischen, y0 beginnt an falscher Stelle?
Meine Daten auf der html wie dies zeigt sich:
[
{
"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
}
]
}
]
und dann meine Daten, die ich in der Tabelle in der Steuereinheit zuzuführen, ist dies:
[
{
"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
}
]
}
]
und meine ch Kunst Optionen sieht wie folgt aus:
$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'
}
}
};
Es sieht aus wie die y0 aus irgendeinem Grund an der falschen Stelle gestartet ...