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

Question

我正在尝试在 AmCharts 中创建简单的序列图，但无法使条形占据容器的整个宽度。有没有办法强制这个？

有趣的是，当我检查 svg 元素时，它确实占据了父元素的整个宽度，但内部的条形并没有拉伸(stretch)整个长度。

这是图表配置。

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
    }
  ]
});

Answer 1

AmCharts 默认情况下总是在图表周围添加一些填充。如果要将图表进一步向右扩展，请设置 marginRight为 0 甚至负数，以使图表在容器右侧占据更多空间。您还可以设置autoMargins根据您的喜好调整其他边距(顶部、左侧、底部)。

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>