如何調整AmCharts JS

中的集羣條之間的空間我曾經使用過AmCharts Flash版本和Flash版本，我可以輕鬆創建集羣列/條形圖，如下圖所示。正如你所看到的聚集的酒吧沒有空間分開。我在使用JS版本的AmChart時遇到了麻煩。如何調整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