Question

我以前使用AmCharts flash版本，在flash版本中，我可以轻松创建群集列/条形图，如下图所示。正如您所看到的那样，聚类条没有空格。我在使用AmChart的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>

Answer 1

您需要为条形图设置admin，然后触摸它们。

在代码顶部，第16行“type”：“serial”之后，添加一行：

admin

这是一个JSFiddle https://jsfiddle.net/1w3tbvyv/

如何在AmCharts JS中调整簇条之间的空间

1 个答案: