Блог

У меня есть устройство со столбчатой диаграммой для групп. вот так:stackedBarChart.

Я построил массив меток таким образом, чтобы в каждом столбце был массив, содержащий 2 элемента, чтобы создать разрыв строки между 2 текстами. labels: [["01", "2020 2021"], ["02", "2020 2021"], ["03", "2020 2021"], ["04", "2020 2021"],…] Я хочу, чтобы вторая строка меток, строка, содержащая 2012 год — 2020, была разделена по столбцам, что означает, что каждый год будет находиться ниже графика, который ему принадлежит, а не в центре. как эта диаграмма, возможно ли такое сделать?

вот мой код:

 this.bars = new Chart(this.barChart?.nativeElement, {  type: "bar",  data: {  labels: chartLabels,  datasets: [  {  label: "",  data: chartblue,  backgroundColor: "blue",  stack: 'Stack 0',  barPercentage: this.displayLastYear ? 0.8 : 0.8,  categoryPercentage: 1.0  },  {  label: "",  data: chartgrey,  backgroundColor: "green",  stack: 'Stack 0',  barPercentage: this.displayLastYear ? 0.8 : 0.8,  categoryPercentage: 1.0  },  {  label: "",  data: chartred,  backgroundColor: "red",  stack: 'Stack 0',  barPercentage: this.displayLastYear ? 0.8 : 0.8,  categoryPercentage: 1.0  },  {  label: "",  data: chartblue2,  backgroundColor: "blue",  stack: 'Stack 1',  barPercentage: this.displayLastYear ? 1.1 : 0,  categoryPercentage: this.displayLastYear ? 0.7 : 0,  },  {  label: "",  data: chartgrey2,  backgroundColor: "green",  stack: 'Stack 1',  barPercentage: this.displayLastYear ? 1.1 : 0,  categoryPercentage: this.displayLastYear ? 0.7 : 0,  },  {  label: "",  data: chartred2,  backgroundColor: "red",  stack: 'Stack 1',  barPercentage: this.displayLastYear ? 1.1 : 0,  categoryPercentage: this.displayLastYear ? 0.7 : 0,  },  ],  },  plugins: [ChartDataLabels],  options: {  hover: {  animationDuration: 0, // duration of animations when hovering an item  },  layout: {  padding: {  top: 20  },  },  responsive: true,  maintainAspectRatio: false,  plugins: {  datalabels: {  display: true,  color: function (context) {  var value = context.dataset.backgroundColor;  if (value === '#4487C1' || value == '#D18D8D') {  return '#ffffff';  } else {  return '#4487C1';  }  },  textAlign: "center",  formatter: (value, index) =gt; {  if (value !== 0) return value;  else return null;  },  font: {  size: 16,  family: "Spoiler",  },  },  },  legend: {  display: false,  },  scales: {  xAxes: [  {  offset: true,  gridLines: {  display: false,  },  stacked: true,  ticks: {  fontSize: this.displayLastYear ? 14 : 16,  lineHeight: 1,  fontFamily: "'Spoiler'",  fontStyle: "bold",  fontColor: "black",  },  },  ],  yAxes: [  {  stacked: true,  display: false,  ticks: {  beginAtZero: true,  },  },  ],  },   animation: {  onComplete: function () {  var chartInstance = this.chart;  var horizontal =  chartInstance.config.type.lastIndexOf("horizontal", 0) === 0;   var ctx = chartInstance.ctx;  ctx.textAlign = horizontal ? "left" : "center";  ctx.textBaseline = horizontal ? "middle" : "bottom";  ctx.font = Chart.helpers.fontString(18, 'bold', 'Spoiler');   var dataLabels = {};  var equationForGrouping = horizontal ? Math.max : Math.min;   Chart.helpers.each(  this.data.datasets.forEach(function (dataset, i) {  var meta = chartInstance.controller.getDatasetMeta(i);  Chart.helpers.each(  meta.data.forEach(function (bar, index) {  if (meta.hidden != true) {  var groupByCoordinate = horizontal  ? bar._model.y - 5  : bar._model.x;  var otherCoordinate = horizontal  ? bar._model.x  : bar._model.y - 5;   if (dataLabels[groupByCoordinate]) {  dataLabels[groupByCoordinate][0] = equationForGrouping(  otherCoordinate,  dataLabels[groupByCoordinate][0]  );  dataLabels[groupByCoordinate][1]  = dataset.data[index];  } else  dataLabels[groupByCoordinate] = [  otherCoordinate,  dataset.data[index],  ];  }  }),  this  );  }),  this  );  for (var key in dataLabels) {  if (horizontal)  ctx.fillText(  dataLabels[key][1],  dataLabels[key][0],  key  );  else  ctx.fillText(  dataLabels[key][1],  key,  dataLabels[key][0]  );  }  },  },  }, });