javascript - 在AmCharts中是否可以使序列图中的条形图占据全宽？

我试图在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
    }
  ]
});

最佳答案

默认情况下，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>

关于javascript - 在AmCharts中是否可以使序列图中的条形图占据全宽？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51820027/