http://www.amcharts.com/demos/simple-column-chart/#theme-none我正在关注此脚本
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition":"start",
"tickLength":20
},
"exportConfig":{
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
当我删除2个国家/地区以外的所有数据(我的意思是2条)时,条的宽度会增加到整个页面的大小。
<html>
<head>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}],
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition":"start",
"tickLength":20
},
"exportConfig":{
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
</script>
<style type="text/css">
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
我什至尝试删除CSS中的宽度100%,但没有成功。
我只想要一个数据,然后打印一个小(固定)尺寸的条形图。如果大于1,则应自动添加...(不关心右侧的剩余空间)
您可以使用graph.fixedColumnWidth属性轻松地以相同的恒定像素宽度强制所有列。
以下是相关文档:
http://docs.amcharts.com/3/javascriptcharts/AmGraph#fixedColumnWidth
代码:
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits",
"fixedColumnWidth": 50
}],
工作示例:http : //jsfiddle.net/amcharts/nctpzzbr/
如果您需要根据图表中元素的实际数量来增加/缩小图表容器,则它会更复杂,但也有可能。
为此,我们将使用“ AmCharts.addInitHandler”属性来设置我们自己的函数,以在呈现图表之前执行该函数:
// this will get executed BEFORE chart is drawn
// we'll use it to modify the width of the chart area
AmCharts.addInitHandler(function(chart) {
// total offsets reserved for margins
var offsets = 100;
// pixel value reserved for each category
var categoryWidth = 80;
// calculate width
var width = offsets + chart.dataProvider.length * categoryWidth;
// set container width
document.getElementById("chartdiv").style.width = "" + width + "px";
// since the chart is already build for the initial container size we need to
// revalidate it's size. we'll delay a little bit the call to invalidateSize()
// so that the chart elements are created first
setTimeout(function () {
chart.invalidateSize();
document.getElementById("chartdiv").style.display = "block";
}, 1);
}, ['serial']);
这是一个使用上述代码的工作示例:http : //jsfiddle.net/amcharts/tc3uf92e/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句