Как уменьшить расстояние между барами в нескольких рядах 4 диаграммы? - PullRequest
Новая
       3

Как уменьшить расстояние между барами в нескольких рядах 4 диаграммы?

0 голосов
/ 22 июня 2019

У меня есть график, где столбцы должны быть разных цветов. Проблема в том, что единственный способ, которым я осознаю, что я могу это сделать, - это иметь каждый бар / значение в качестве своей собственной серии, но выполнение таких действий оставляет широкие открытые пространства между каждой парой. Бары не занимают места.

Я увеличил ширину ячейки с: 

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>
...