AmCharts에서 클러스터 막대 간격을 조정하는 방법 JS

저는 AmCharts 플래시 버전을 사용했고 Flash 버전에서는 아래 이미지와 같은 클러스터 열/막대 차트를 쉽게 만들 수 있습니다. 보시다시피 클러스터 된 막대에는 간격이 없습니다. 나는 AmChart의 JS 버전과 같은 일을하는 데 어려움을 겪고있다. AmCharts에서 클러스터 막대 간격을 조정하는 방법 JS

JS 버전은 다음과 같습니다.

나는 구성과 장난 시도했지만 여전히 클러스터 된 바 사이의 공간을 제거 할 수있는 방법을 찾을 수 없습니다.

아래 코드는 제 코드입니다.

<!DOCTYPE html> 
<html> 
<head> 
<title>chart created with amCharts | amCharts</title> 
<meta name="description" content="chart created using amCharts live editor" /> 

<!-- amCharts javascript sources --> 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 


<!-- amCharts javascript code --> 
<script type="text/javascript"> 
AmCharts.makeChart("chartdiv", 
{ 
"type": "serial", 
"categoryField": "category", 
"backgroundColor": "#00000", 
"fontSize": 11, 
"color":"#ffffff", 
"startDuration": 1, 
"categoryAxis": { 
"autoRotateAngle": -7.2, 
"gridPosition": "start", 
"labelRotation": -90, 
"titleRotation": 0 
}, 
"trendLines": [], 
"graphs": [ 
{ 
"balloonText": "[[title]] of [[category]]:[[value]]", 
"fillAlphas": 1, 
"fillColors": "#ff0000", 
"id": "AmGraph-1", 
"title": "graph 1", 
"title": "DIRECT", 
"type": "column", 
"valueField": "column-1" 



}, 
{ 
"balloonText": "[[title]] of [[category]]:[[value]]", 
"fillAlphas": 1, 
"fillColors": "#008000", 
"id": "AmGraph-2", 
"title": "graph 2", 
"title": "TRANSIT", 
"type": "column", 
"valueField": "column-2" 

} 
], 
"guides": [], 
"valueAxes": [ 
{ 
"id": "ValueAxis-1", 
"title": "Axis title" 
} 
], 
"allLabels": [], 
"balloon": {}, 
"legend": { 
"enabled": true, 
"color": "#ffffff", 
"position": "absolute", 
"useGraphSettings": true 


}, 
"titles": [ 
{ 
"id": "Title-1", 
"size": 15, 
"text": "DAILY REPORT OF TRAFFIC TYPE" 
} 
], 
"dataProvider": [ 
{ 
"category": "2016-10-01", 
"column-1": 22, 
"column-2": 23 
}, 
{ 
"category": "2016-10-02", 
"column-1": 11, 
"column-2": 13 
}, 
{ 
"category": "2016-10-03", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-04", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-05", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-06", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-07", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-08", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-09", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-10", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-11", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-12", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-13", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-14", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-15", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-16", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-17", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-18", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-19", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-20", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-21", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-22", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-23", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-24", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-25", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-26", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-27", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-28", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-29", 
"column-1": null, 
"column-2": null 
}, 
{ 
"category": "2016-10-30", 
"column-1": null, 
"column-2": null 
} 
] 
} 
); 

</script> 
</head> 
<body> 
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #222222;" ></div> 
</body> 
</html>

출처

2016-10-19 TwoThumbSticks