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/
