Столбчатая диаграмма с 2 столбцами в последней категории - AMcharts4 - PullRequest
Новая
       20

Столбчатая диаграмма с 2 столбцами в последней категории - AMcharts4

0 голосов
/ 11 октября 2019

У меня есть некоторые проблемы на столбчатой ​​диаграмме. Мне нужна последняя категория для отображения 2 столбцов. Я пробовал это несколько раз, но не получилось. Ребята, не могли бы вы мне помочь, пожалуйста?

Вот код:

// Начало темы 

am4core.useTheme(am4themes_animated);

// Создание экземпляра диаграммы 

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

// Данные для обеих серий 

var data = [ {
  "mes": "Jan",
  "income": 23.5,
  "income2": 32.5,
  "expenses": 21.1
}, {
  "mes": "Feb",
  "income": 26.2,
  "income2": 32.5,
  "expenses": 30.5
}, {
  "mes": "Mar",
  "income": 30.1,
  "income2": 32.5,
  "expenses": 34.9
}, {
  "mes": "Apr",
  "income": 29.5,
  "income2": 32.5,
  "expenses": 31.1
}, {
  "mes": "May",
  "income": 30.6,
  "income2": 32.5,
  "expenses": 28.2
}, {
  "mes": "Jun",
  "income": 4.1,
  "income2": 32.5,
  "expenses": 2.9
}, {
  "mes": "Jul",
  "income": 14.1,
  "income2": 32.5,
  "expenses": 12.9
} , {
  "mes": "Aug",
  "income": 28.1,
  "income2": 32.5,
  "expenses": 32.9
} , {
  "mes": "Sep",
  "income": 31.1,
  "income2": 32.5,
  "expenses": 3.9
}, {
  "mes": "Oct",
  "income": 25.1,
  "income2": 32.5,
  "expenses": 37.9
}, {
  "mes": "Nov",
  "income": 28.1,
  "income2": 32.5,
  "expenses": 23.9
}, {
  "mes": "Dec",
  "income": 15.1,
  "income2": 32.5,
  "expenses": 30.9
}, {
  "mes": "YT",
  "income": 15.1
}, {
  "mes": "YT",
  "income": 21.1
}];

/ * Создание осей * / 

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "mes";
categoryAxis.renderer.minGridDistance = 30;

/ * Создание значения оси * / 

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;

/ * Retirandoas linhas Verticais e Horizontais * / 

categoryAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;

/ * Создать серию * / 

var columnSeries = chart.series.push(new am4charts.ColumnSeries());
  columnSeries.dataFields.valueY = "income";
  columnSeries.dataFields.categoryX = "mes";
  columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
  columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
  columnSeries.tooltip.label.textAlign = "middle";

  var valueLabel = columnSeries.bullets.push(new am4charts.LabelBullet());
  valueLabel.label.text = "{valueY}";
  valueLabel.label.fontSize = 12;
  valueLabel.label.verticalCenter = "top";
  valueLabel.locationY = 0.5;



function criarLinhas(field, name, color){
    var lineSeries = chart.series.push(new am4charts.LineSeries());
  lineSeries.name = name;
  lineSeries.dataFields.valueY = field;
  lineSeries.dataFields.categoryX = "mes";
  lineSeries.stroke = color;
  lineSeries.strokeWidth = 3;
  lineSeries.propertyFields.strokeDasharray = "lineDash";
  lineSeries.tooltip.label.textAlign = "middle";

  var bullet = lineSeries.bullets.push(new am4charts.Bullet());
  bullet.fill = color;
  bullet.tooltipText = "[#fff font-size: 15px]{name} in {categoryX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
  var circle = bullet.createChild(am4core.Circle);
  circle.radius = 4;
  circle.fill = am4core.color("#fff");
  circle.strokeWidth = 3;

  let labelBullet = lineSeries.bullets.push(new am4charts.LabelBullet());
  labelBullet.label.text = "{valueY}";
  labelBullet.label.fontSize = 12;
  labelBullet.label.verticalCenter = "bottom";
}

criarLinhas("expenses", "Expenses", am4core.color("#FDD400"));
criarLinhas("income2", "Income2", am4core.color("#96A6BC"));

let title = chart.titles.create();
title.text = "Brews(#)";
title.fontSize = 25;
title.marginBottom = 30;
title.align = "left";

chart.data = data;

https://codepen.io/northonbarbosa/pen/NWWGZxN?editors=0010

...