我正在尝试制作移动和平板电脑屏幕宽度（小于766像素）的Amcharts条形图
我面临以下一些问题 -
由于我使用的是免费版本的amcharts，因此必须通过amcharts＆＃34;保留＆＃34; Js图表。图表中的链接。只有它出现在图表左侧与我的标签重叠。如何将其移至右侧和底部？
我希望类别标签位于值栏之上，以使其更具可读性。我怎么能这样做？
我想增加条形之间的间距以使它们更具可读性，如果用户想要点击它们，它们可以轻松点击预定的条形图。
我不想使用Jquery，我是javascript的新手。如果您能在jsfiddle或片段中显示，我们将不胜感激。
这是我的jsfiddle - http://jsfiddle.net/brpjwf8m/，下面是我的代码段 -
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"rotate": true,
"columnWidth": 0.4,
"depth3D": 0,
"angle": 0,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"inside": true,
"startOnAxis": true,
"labelRotation": 45
},
"export": {
"enabled": true
}
});#chartdiv {
width: 100%;
height: 500px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet"/>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>
答案 0 :(得分：1)
您可以更改积分＆＃39;通过在图表配置中设置creditsPosition来确定位置。 top-left是默认设置，但您也可以使用top-right，bottom-left和bottom-right。
在条形图顶部设置类别标签的唯一方法是使用将labelText设置为"[[category]]"且labelPosition设置为inside的不可见图表对于旋转的条形图。例如：
"graphs": [{
// invisible graph for the label
"labelText": "[[category]]",
"labelPosition": "inside",
"showBalloon": false,
"fillAlphas": 0,
"lineAlpha": 0,
"visibleInLegend": false,
"showAllValueLabels": true,
"type": "column",
"valueField": "visits"
},
//regular graph follows
]
在添加虚拟数据之外，没有多少方法可以更改列之间的空间，这会使您的列更小。由于您正在利用空列，因此您只需将全局columnWidth设置为1并调整不可见图形columnWidth即可使其变小，并通过设置将两者更接近columnSpacing为0可以将事物稍微改变一点，使其间隔更大/更大。
演示如下：
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"rotate": true,
"columnSpacing": 0,
"columnWidth": 1,
"creditsPosition": "bottom-right",
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"labelText": "[[category]]",
"labelPosition": "inside",
"showBalloon": false,
"fillAlphas": 0,
"lineAlpha": 0,
"columnWidth": .6,
"visibleInLegend": false,
"showAllValueLabels": true,
"type": "column",
"valueField": "visits"
},{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelsEnabled": false,
"tickLength": 0,
"color": "#1e1e1e",
"labelRotation": 45
},
"export": {
"enabled": true
}
});#chartdiv {
width: 100%;
height: 500px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet"/>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>