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
}
]
}
]
と私のCH芸術・オプションは、次のようになります。
$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が何らかの理由で間違った場所から開始されたように見えます...