Я делаю полярную диаграмму для отображения спутников.
Но я хочу, чтобы размер сетки отображался с шагом 45 градусов.Я перепробовал множество функций amcharts 4, но это не сработало.
Самое близкое решение, которое у меня есть, - это использовать шаги по 10 градусов, используя minGridDistance, и отформатировать метку так, чтобы показывать только кратные 30потому что он не будет работать с кратными 45, что является нечетным числом.
это мой код:
private configureChart() {
this.series = {};
const chart = this.chart = am4core.create('chartdiv', am4charts.RadarChart);
/* Create axes */
const xAxis = chart.xAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererCircular>());
xAxis.renderer.axisFills.template.disabled = true;
xAxis.renderer.minLabelPosition = 0.01;
// xAxis.renderer.minGridDistance = 10;
// xAxis.formatLabel = (value: number) => {
// if (value % 30 === 0) {
// return value.toString();
// }
// };
xAxis.strictMinMax = true;
xAxis.max = 360;
xAxis.min = 0;
const yAxis = chart.yAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererRadial>());
yAxis.renderer.labels.template.verticalCenter = 'bottom';
yAxis.renderer.labels.template.horizontalCenter = 'right';
yAxis.renderer.minLabelPosition = 0.01;
yAxis.renderer.inversed = true;
yAxis.strictMinMax = true;
yAxis.max = 90;
yAxis.min = 0;
this.createSeries('GPS', 'GP', '#98BD4A');
this.createSeries('GLN', 'GL', '#DEAE4E');
this.createSeries('GAL', 'GA', '#6BB4DB');
this.createSeries('BDS', 'BD', '#B543C1');
/* Add legend */
chart.legend = new am4charts.Legend();
/* Add cursor */
chart.cursor = new am4charts.RadarCursor();
}
private createSeries(title: string, key: string, color: string) {
const chart = this.chart;
/* Create and configure series */
const series = chart.series.push(new am4charts.RadarSeries());
series.fill = am4core.color(color);
series.dataFields.valueX = 'azimuth';
series.dataFields.valueY = 'elevation';
series.sequencedInterpolation = true;
series.sequencedInterpolationDelay = 10;
series.strokeOpacity = 0;
series.name = title;
series.data = [];
const circleBullet = series.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.strokeOpacity = 0;
circleBullet.circle.radius = 8;
circleBullet.tooltipText = `SAT PRN {prn}
Azim: {azimuth}º
Elev: {elevation}º
Stat: {snr}dBHz`;
this.series[key] = series;
}