我正在尝试在AmCharts中创建简单的序列图,但是不能使条形图占据容器的整个宽度。有办法强制吗?
有趣的是,当我检查svg元素时,它确实占用了父级的整个宽度,但是内部的条形图并没有拉伸该全长。
这是图形配置。
this.chart = this.AmCharts.makeChart(this.barChart.nativeElement, {
type: 'serial',
creditsPosition: 'bottom-right',
rotate: true,
resizeCategoryWidth: 10,
dataProvider: chartData.publishers,
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
graphs: [
{
fillAlphas: 1,
lineAlpha: 0,
lineColor: '#2196f3',
type: 'column',
fillColors: '#E2E7EE',
clustered: false,
valueField: 'max',
labelText: '[[value]]',
labelFunction: function(val) {
return val.dataContext.count;
},
labelPosition: 'right',
columnWidth: 0.15,
cornerRadiusTop: 3,
showBalloon: false
},
{
fillAlphas: 1,
lineAlpha: 0,
type: 'column',
valueField: 'count',
fillColors: '#2196f3',
columnWidth: 0.15,
cornerRadiusTop: 3,
showBalloon: false
}
],
chartCursor: {
categoryBalloonEnabled: false,
cursorAlpha: 0,
zoomable: false
},
categoryField: 'name',
categoryAxis: {
gridAlpha: 0,
color: '#333',
axisAlpha: 0,
fontSize: 12,
inside: true,
gridPosition: 'start',
tickPosition: 'start',
tickLength: 0
},
valueAxes: [
{
axisAlpha: 0,
gridAlpha: 0,
showLastLabel: false
}
]
});
答案 0 :(得分:2)
默认情况下,AmCharts始终在图表周围添加一些填充。如果要向右扩展图表,请将marginRight
设置为0甚至是负数,以使图表在容器的右侧占据更多空间。您还可以将autoMargins
设置为false,并根据自己的喜好调整其他其他边距(顶部,左侧,底部)。
var chartData = {
publishers: [{
name: "Pub-1",
max: 1,
count: .5
},{
name: "Pub-2",
max: 1,
count: .75
},{
name: "Pub-3",
max: 1,
count: .25
},{
name: "Pub-4",
max: 1,
count: 1
}]
}
AmCharts.makeChart("chartdiv", {
type: 'serial',
creditsPosition: 'bottom-left',
rotate: true,
autoMargins: false,
marginLeft: 20,
marginBottom: 35,
marginRight: -40,
resizeCategoryWidth: 10,
dataProvider: chartData.publishers,
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
graphs: [
{
fillAlphas: 1,
lineAlpha: 0,
lineColor: '#2196f3',
type: 'column',
fillColors: '#E2E7EE',
clustered: false,
valueField: 'max',
labelText: '[[value]]',
labelFunction: function(val) {
return val.dataContext.count;
},
labelPosition: 'right',
columnWidth: 0.15,
cornerRadiusTop: 3,
showBalloon: false
},
{
fillAlphas: 1,
lineAlpha: 0,
type: 'column',
valueField: 'count',
fillColors: '#2196f3',
columnWidth: 0.15,
cornerRadiusTop: 3,
showBalloon: false
}
],
chartCursor: {
categoryBalloonEnabled: false,
cursorAlpha: 0,
zoomable: false
},
categoryField: 'name',
categoryAxis: {
gridAlpha: 0,
color: '#333',
axisAlpha: 0,
fontSize: 12,
inside: true,
gridPosition: 'start',
tickPosition: 'start',
tickLength: 0
},
valueAxes: [
{
axisAlpha: 0,
gridAlpha: 0,
showLastLabel: false
}
]
});
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>