AmCharts 4：网格步骤

Question

我正在制作一个极坐标图来显示卫星。

但我希望网格大小以 45 度为单位显示。试了很多amcharts 4的功能，都不行。

我得到的最接近的解决方案是使用 minGridDistance 使用 10 度的步长并将标签格式化为仅显示 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;
  }

Answer 1

1) 通过设置 axis.grid.template.disabled = true; 完全禁用网格 2) 在所需值处添加 AxisRanges。有关范围的更多信息：https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/

AmCharts 4：网格步骤

AmCharts 4: grid step

amcharts

typescript

angular