Javascript 如何在AMJS中调整簇条之间的间距
我曾经使用AmCharts flash版本，在flash版本中，我可以轻松创建如下图所示的群集柱/条形图。如您所见，聚集的条形图之间没有间距。我在使用JS版本的AmChart时遇到了同样的问题。 在JS版本中，这里是它的外观 我尝试过使用配置，但仍然找不到消除聚集条之间空间的方法 下面是我的代码Javascript 如何在AMJS中调整簇条之间的间距,javascript,css,amcharts,Javascript,Css,Amcharts,我曾经使用AmCharts flash版本，在flash版本中，我可以轻松创建如下图所示的群集柱/条形图。如您所见，聚集的条形图之间没有间距。我在使用JS版本的AmChart时遇到了同样的问题。 在JS版本中，这里是它的外观 我尝试过使用配置，但仍然找不到消除聚集条之间空间的方法 下面是我的代码 <!DOCTYPE html> <html> <head> <title>chart created with amCharts | amCharts
<!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>
使用amCharts创建的图表| amCharts
AmCharts.makeChart（“chartdiv”，
{
“类型”：“串行”，
“类别字段”：“类别”，
“背景色”：“00000”，
“字体大小”：11，
“颜色”：“ffffff”，
“起始持续时间”：1，
“分类法”：{
“自动旋转角度”：-7.2，
“网格位置”：“开始”，
“唇瓣旋转”：-90，
“标题旋转”：0
},
“趋势线”：[]，
“图表”：[
{
“文本”：“[[类别]]：[[价值]]中的[[标题]]”，
“填充字母”：1，
“填充颜色”：“ff0000”，
“id”：“AmGraph-1”，
“标题”：“图1”，
“标题”：“直接”，
“类型”：“列”，
“valueField”：“第1列”
},
{
“文本”：“[[类别]]：[[价值]]中的[[标题]]”，
“填充字母”：1，
“填充颜色”：“008000”，
“id”：“AmGraph-2”，
“标题”：“图2”，
“标题”：“运输”，
“类型”：“列”，
“valueField”：“第2列”
}
],
“指南”：[]，
“价值轴”：[
{
“id”：“ValueAxis-1”，
“标题”：“轴标题”
}
],
“所有标签”：[]，
“气球”：{}，
“传奇”：{
“启用”：正确，
“颜色”：“ffffff”，
“位置”：“绝对”，
“useGraphSettings”：正确
},
“头衔”：[
{
“id”：“标题1”，
“尺寸”：15，
“文本”：“每日交通类型报告”
}
],
“数据提供者”：[
{
“类别”：“2016-10-01”，
“第1栏”：22，
“第2栏”：23
},
{
“类别”：“2016-10-02”，
“第1栏”：11，
“第2栏”：13
},
{
“类别”：“2016-10-03”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-04”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-05”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-06”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-07”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-08”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-09”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-10”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-11”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-12”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-13”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-14”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-15”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-16”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-17”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-18”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-19”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-20”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-21”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-22”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-23”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-24”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-25”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-26”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-27”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-28”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-29”，
“第1列”：空，
“第2列”：空
},
{
“类别”：“2016-10-30”，
“第1列”：空，
“第2列”：空
}
]
}
);
“ColumnSpacting”：0"columnSpacing": 0,
这是一个JSFiddle我以前试过，但结果是第一层的第二条粘在第二层的第一条上对不起，我更新了我的答案，你需要的是列间距，而不是宽度。包括一把小提琴！现在我知道columnWidth用于单列图表间距，columnSpacing用于聚集列。