在AmCharts中是否可以使序列图中的条形图占据全宽? [英] Is it possible in AmCharts to make the bars in a serial chart take up full width?

问题描述

我试图在AmCharts中创建简单的序列图，但是不能使条形图占据容器的整个宽度.有没有办法强制执行此操作?

I am trying to create simple Serial Chart in AmCharts but can't make the bars take up the full width of the container. Is there a way to force this?

有趣的是，当我检查svg元素时，它确实占据了父元素的整个宽度，但是里面的条形图并没有拉伸该全长.

Interestingly, when I inspect the svg element, it does take up the full width of the parent but the bars inside don't stretch that full length.

这是图形配置.

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并微调其他边距(顶部，左侧，底部).

AmCharts always adds some padding around the chart by default. If you want to expand the chart more toward the right, set marginRight to 0 or even a negative number to make the chart take up more space on the right side of the container. You can also set autoMargins to false and fine tune other other margins (top, left, bottom) to your liking.

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>

这篇关于在AmCharts中是否可以使序列图中的条形图占据全宽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！