Иметь единую серию из сложенных столбцов, которая охватывает всю ширину диаграммы ⇐ Javascript

[Anonymous]

Я использую диаграммы AM 4, у меня есть диаграмма с осью значения (Y) и осью даты (x), которая имеет серию линий и серию столбцов. Вы можете увидеть его копию здесь: https://stackblitz.com/edit/vue-8hpoeo6qобразное. /> Инициализация конфигурации /данных и диаграммы для этой диаграммы выглядит следующим образом: < /p>

Код: Выделить всё

const xAxis = {
type: 'DateAxis',
title: {
text: 'Date',
},
dataFields: {
category: 'date',
},
};

const yAxis = {
type: 'ValueAxis',
title: {
text: 'Score',
},
min: 0,
max: 25,
calculateTotals: true,
};

const scoreSeries = {
type: 'LineSeries',
name: 'Scores',
stroke: '#328170',
strokeWidth: 3,
dataFields: {
valueY: 'score',
dateX: 'date',
},
bullets: [
{
type: 'Bullet',
children: [
{
type: 'CircleBullet',
width: 30,
height: 30,
},
],
},
],
};

const eventSeries = {
type: 'ColumnSeries',
name: 'Events',
fill: '#000',
stroke: '#000',
stacked: false,
clustered: false,
dataFields: {
valueY: 'eventScore',
dateX: 'eventDate',
},
};

const data = [
{
score: 30,
date: '2025-04-30',
},
{
score: 22,
date: '2025-05-02',
},
{
score: 17,
date: '2025-05-08',
},
{
score: 8,
date: '2025-05-14',
},
{
eventScore: 10,
eventDate: '2025-05-02',
},
{
eventScore: 10,
eventDate: '2025-05-08',
},
{
redScore: 20,
colourDate: '2025-04-30',
},
{
yellowScore: 15,
colourDate: '2025-04-30',
},
{
greenScore: 5,
colourDate: '2025-04-30',
},
];

am4core.createFromConfig(
{
data: data,
xAxes: [xAxis],
yAxes: [yAxis],
series: series,
},
'chart',
am4charts.XYChart
);
< /code>
Теперь то, что я хотел бы сделать, это добавить сложенную полосу, которая охватывает всю полную ширину диаграммы и сидит за существующей серией линии и столбцов.const redSeries = {
type: 'ColumnSeries',
name: 'Red',
fill: '#FF0000',
stroke: '#FF0000',
stacked: true,
clustered: false,
columns: {
template: {
width: am4core.percent(100),
},
},
dataFields: {
valueY: 'redScore',
valueYShow: 'totalPercent',
dateX: 'colourDate',
},
};

const yellowSeries = {
type: 'ColumnSeries',
name: 'Yellow',
fill: '#FFFF00',
stroke: '#FFFF00',
stacked: true,
clustered: false,
columns: {
template: {
width: am4core.percent(100),
},
},
dataFields: {
valueY: 'yellowScore',
valueYShow: 'totalPercent',
dateX: 'colourDate',
},
};

const greenSeries = {
type: 'ColumnSeries',
name: 'Green',
fill: '#008000',
stroke: '#008000',
stacked: true,
clustered: false,
columns: {
template: {
width: am4core.percent(100),
},
},
dataFields: {
valueY: 'greenScore',
valueYShow: 'totalPercent',
dateX: 'colourDate',
},
};
< /code>
Я добавил новую серию в мой массив серии: < /p>
const series = [
redSeries,
yellowSeries,
greenSeries,
scoreSeries,
eventSeries,
];
< /code>
и я добавил несколько новых элементов данных с необходимыми свойствами: < /p>
const data = [
rest of data...,
{
redScore: 20,
colourDate: '2025-04-30',
},
{
yellowScore: 15,
colourDate: '2025-04-30',
},
{
greenScore: 5,
colourDate: '2025-04-30',
},
];

stackblitz для этого: https://stackblitz.com/edit/vue-b9kspsqjобразной /> < /p>
Первый выпуск - это новая стека - не стек - все три столбца есть, но они находятся непосредственно друг на друга, и только последние определенные шоу. Я попытался добавить ширину шаблона для трех цветовых серий, например: < /p>
const redSeries = {
rest of series config...,
'template': {
'width': am4core.percent(100),
},
< /code>
Но это просто заставляет столбец занимать 100% ячейки, а не всю диаграмму. Как я могу исправить укладку и заставить стек занять всю ширину диаграммы? Должен ли я добавить еще одну ось, которая не является осью даты, возможно, ось категории с одной категорией?

Подробнее здесь: https://stackoverflow.com/questions/796 ... h-of-chart