Problema con connectEnds en am5 radarLineSeries utilizando templateField

Resumen del Problema con connectEnds en RadarLineSeries de am5

He implementado un gráfico de líneas en radar utilizando la biblioteca am5, pero estoy enfrentando un problema. Al usar templateField en la serie radarLineSeries para aplicar diferentes valores de propiedades, como color y grosor de línea, he notado que, a pesar de haber configurado connectEnds en true, los extremos de las líneas no están conectados.

Solución Propuesta

Para conectar correctamente los puntos de inicio y fin de la línea mientras se utiliza templateField, es necesario asegurarse de que las propiedades de conexión estén configuradas correctamente. Una posible solución es aplicar el estilo del templateField solo en la serie misma y no afectar a la configuración de connectEnds.

A continuación, se presenta el código ajustado. Esto incluye una revisión de cómo se aplican las propiedades a las líneas:

var root = am5.Root.new("chartdiv");

// Crear gráfico
window.chart = root.container.children.push(am5radar.RadarChart.new(root, {
    panX: false,
    panY: false,
    wheelX: "panX",
    wheelY: "zoomX",
    layout: root.verticalLayout,
}));

// Crear ejes y sus renderizadores
var xRenderer = am5radar.AxisRendererCircular.new(root, {});
window.xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: xRenderer,
    tooltip: am5.Tooltip.new(root, {})
}));

window.yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5radar.AxisRendererRadial.new(root, {
        innerRadius: am5.percent(40),
    })
}));

// Crear serie
window.series = chart.series.push(am5radar.RadarLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    categoryXField: "category",
    tooltip: am5.Tooltip.new(root, {
        labelText: "{valueY}"
    }),
    connectEnds: true,
}));

// Configuración de los strokes
series.strokes.template.set("templateField", "test001");
series.strokes.template.set("strokeWidth", 5);

// Datos
data = [
    { category: "A", value: 50, test001: { stroke: am5.color('#ff0000') } },
    { category: "B", value: 70, test001: { stroke: am5.color('#0000ff') } },
    { category: "C", value: 60, test001: {} },
    { category: "D", value: 80, test001: {} },
    { category: "E", value: 80, test001: {} },
];

series.data.setAll(data);
xAxis.data.setAll(data);

chart.appear(1000, 100);

Consideraciones Finales

Es crucial recordar que cuando se utilizan campos de plantilla (templateField), estos deben aplicarse correctamente sin interferir con las opciones de conexión de las líneas. Asegúrate de que la biblioteca am5 esté actualizada a la última versión para evitar cualquier problema de compatibilidad que pueda afectar la visualización del gráfico.