网站搜索

angular - AmCharts 4:网格步长


我正在制作一个极地图表来显示卫星。

但是我希望网格的大小以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;
  }

答案#1

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