如何减少列图4中两列间的空间

Question

，我在角10中使用Am图表4，并希望减少两列之间的空间.

我试过很多方法，但没有解决这个问题

你能帮我减少列之间的空位吗？

有什么优雅的解决方案吗？

    let chart = am4core.create("authorisedChartDiv", am4charts.XYChart);
    chart.data = chartData;

    // Modify chart's colors
    chart.colors.list = [
        am4core.color("#1297e0"),
        am4core.color("#5ad146")
    ];

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 100;
        categoryAxis.renderer.labels.template.disabled = true;

        chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.columns.template.width = am4core.percent(20);

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 1;
    columnTemplate.strokeOpacity = 0;

======== 请参阅所附屏幕截图以了解的更多信息

​

​

​

this.browserOnly(() => {
  am4core.useTheme(am4themes_material);
  am4core.useTheme(am4themes_animated);

  let chart = am4core.create("authorisedChartDiv", am4charts.XYChart);
  chart.data = chartData;

  // Modify chart's colors
  chart.colors.list = [
    am4core.color("#1297e0"),
    am4core.color("#5ad146")
  ];

  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "country";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 100;
  categoryAxis.renderer.labels.template.disabled = true;

  chart.yAxes.push(new am4charts.ValueAxis());

  // Create series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = "visits";
  series.dataFields.categoryX = "country";
  series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
  series.columns.template.fillOpacity = .8;
  series.columns.template.width = am4core.percent(20);

  var columnTemplate = series.columns.template;
  columnTemplate.strokeWidth = 1;
  columnTemplate.strokeOpacity = 0;

  // Add distinctive colors for each column using adapter
  series.columns.template.adapter.add("fill", (fill, target) => {
    return chart.colors.getIndex(target.dataItem.index);
  });

#authorisedChartDiv {
  width: 100%;
  height: 250px;
}

<div id="authorisedChartDiv"></div>

​

Answer 1

我想这个参数是关键：

categoryAxis.renderer.cellStartLocation = 0.2
categoryAxis.renderer.cellEndLocation = 0.8

更多信息请访问：https://www.amcharts.com/docs/v4/tutorials/managing-width-and-spacing-of-column-series/