Question

我有一张图表，其中的条形需要为不同的颜色。问题在于，我知道能够做到这一点的唯一方法是将每个条形/值作为自己的系列，但是以这种方式进行操作会在每对之间留下广阔的空间。条形没有占据空间。

我通过以下方式增加了单元格宽度：

categoryAxis.renderer.cellStartLocation = 0.01;
categoryAxis.renderer.cellEndLocation = 0.99;

并使用以下方法增加前两个系列的列宽（作为测试）：

series.columns.template.width = am4core.percent(100);
series2.columns.template.width = am4core.percent(100);

但是正如您所看到的，它几乎没有什么改变。

有人对减少/消除大空白有想法吗？

am4core.ready(function() {
          
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.legend.itemContainers.template.paddingTop = 0;
chart.legend.itemContainers.template.paddingBottom = 0;

// Add data
chart.data = [{
  "players": "Form",
  "home_team_form": 10,
  "guest_team_form": 9
}, {
  "players": "Aggression",
  "home_team_aggression": 5,
  "guest_team_aggression": 7
}, {
  "players": "Discipline",
  "home_team_discipline": 3,
  "guest_team_discipline": 8
}, {
  "players": "Experience",
  "home_team_experience": 6,
  "guest_team_experience": 2
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "players";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

// Increased cell width
categoryAxis.renderer.cellStartLocation = 0.01;
categoryAxis.renderer.cellEndLocation = 0.99;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "home_team_form";
series.dataFields.categoryX = "players";
series.name = "Home Form";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
series.fill = am4core.color("red");

// Increased column width of "series"
series.columns.template.width = am4core.percent(100);

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

// Create series2
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "guest_team_form";
series2.dataFields.categoryX = "players";
series2.name = "Guest Form";
series2.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series2.columns.template.fillOpacity = .8;
series2.fill = am4core.color("black");

// Increased column width of "series2"
series2.columns.template.width = am4core.percent(100);

var columnTemplate = series2.columns.template;
columnTemplate.strokeWidth = 0;
columnTemplate.strokeOpacity = 0;

// Create series3
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "home_team_aggression";
series3.dataFields.categoryX = "players";
series3.name = "Home Aggression";
series3.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series3.columns.template.fillOpacity = .8;
series3.fill = am4core.color("blue");


var columnTemplate = series3.columns.template;
columnTemplate.strokeWidth = 0;
columnTemplate.strokeOpacity = 0;

// Create series4
var series4 = chart.series.push(new am4charts.ColumnSeries());
series4.dataFields.valueY = "guest_team_aggression";
series4.dataFields.categoryX = "players";
series4.name = "Guest Aggression";
series4.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series4.columns.template.fillOpacity = .8;
series4.fill = am4core.color("orange");


var columnTemplate = series4.columns.template;
columnTemplate.strokeWidth = 0;
columnTemplate.strokeOpacity = 0;

// Create series5
var series5 = chart.series.push(new am4charts.ColumnSeries());
series5.dataFields.valueY = "home_team_discipline";
series5.dataFields.categoryX = "players";
series5.name = "Home Discipline";
series5.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series5.columns.template.fillOpacity = .8;
series5.fill = am4core.color("purple");


var columnTemplate = series5.columns.template;
columnTemplate.strokeWidth = 0;
columnTemplate.strokeOpacity = 0;

// Create series6
var series6 = chart.series.push(new am4charts.ColumnSeries());
series6.dataFields.valueY = "guest_team_discipline";
series6.dataFields.categoryX = "players";
series6.name = "Guest Discipline";
series6.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series6.columns.template.fillOpacity = .8;
series6.fill = am4core.color("lightslategray");


var columnTemplate = series6.columns.template;
columnTemplate.strokeWidth = 0;
columnTemplate.strokeOpacity = 0;

// Create series7
var series7 = chart.series.push(new am4charts.ColumnSeries());
series7.dataFields.valueY = "home_team_experience";
series7.dataFields.categoryX = "players";
series7.name = "Home Experience";
series7.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series7.columns.template.fillOpacity = .8;
series7.fill = am4core.color("goldenrod");


var columnTemplate = series7.columns.template;
columnTemplate.strokeWidth = 0;
columnTemplate.strokeOpacity = 0;

// Create series8
var series8 = chart.series.push(new am4charts.ColumnSeries());
series8.dataFields.valueY = "guest_team_experience";
series8.dataFields.categoryX = "players";
series8.name = "Guest Experience";
series8.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series8.columns.template.fillOpacity = .8;
series8.fill = am4core.color("salmon");


var columnTemplate = series8.columns.template;
columnTemplate.strokeWidth = 0;
columnTemplate.strokeOpacity = 0;


}); // end am4core.ready()

#chartdiv {
		width: 500px;
		height: 500px;
		display: inline-block;
	}

<html>
  <head>
    <title>
    </title>
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
  </head>
  
  <body>
    <div id="chartdiv"></div>
  </body>
</html>

如何减少多个系列amcharts 4条形图中的条形空间？

0 个答案: