אנגולר - AmCharts 4: צעד רשת

אני מכין תרשים קוטבי כדי להציג לוויינים.

אבל אני רוצה שגודל הרשת יוצג בשלבים של 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;
  }

תשובה #1

1) השבת את הרשת לחלוטין על ידי הגדרת axis.grid.template.disabled=true; 2) הוסף AxisRanges בערכים הרצויים. למידע נוסף על טווחים: https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/