0
나는 다음과 같이 누적 막대 그래프에서 막대 사이에 공백이 nvd3이 이상한 동작을 받고 있어요 :누적 가로 막 대형 차트는 사이에 공백을 포함하고 y0는 잘못된 위치에서 시작합니까?</p> <p><a href="https://i.stack.imgur.com/DASdV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DASdV.png" alt="enter image description here"></a></p> <p>내 데이터를 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 어떤 이유로 잘못된 지점에서 시작되는 것 같습니다 ...