AMCharts - 屏幕阅读器不显示折线图的任何内容

如何解决AMCharts - 屏幕阅读器不显示折线图的任何内容

我有一个测试站点：http://conor.finsight.tier1fin.com/index.html

当它加载时（忽略弹出的警告）但是当使用屏幕阅读器和折线图时，数据点没有显示任何值。饼图和条形图都很好。

我在网站上看到他们应该开箱即用。 如果您调试代码，您可以看到一个名为 LineChart.tsx 的类，这是呈现它的代码。

代码在这里

chartInstance = am4core.create(divId,am4charts.XYChart);
var lineChartOptions: ILineOptions = Object.assign(LINE_BASE_OPTIONS,props.chartOptions);

chartInstance.data = props.data;
var dateAxis;
var categoryAxis = null;
if (lineChartOptions.chartSettings?.xAxis.toupperCase() === 'yearly' ||
  lineChartOptions.chartSettings?.xAxis.toupperCase() === 'monthly' ||
  lineChartOptions.chartSettings?.xAxis.toupperCase() === 'quarterly') 
{
  dateAxis = chartInstance.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.minGriddistance = lineChartOptions.minGriddistance as number;
  dateAxis.renderer.grid.template.location = 0.5;
  dateAxis.title.text = lineChartOptions.xAxisLabel as string;
}
else {
  categoryAxis = chartInstance.xAxes.push(new am4charts.CategoryAxis());
  // When x-axis is not based on date value,createDataProvider routine will map all X value to "category"
  categoryAxis.datafields.category = lineChartOptions.xAxisField;
  categoryAxis.renderer.minGriddistance = lineChartOptions.minGriddistance as number;
  categoryAxis.title.text = lineChartOptions.xAxisLabel as string;
  categoryAxis.fontFamily = lineChartOptions.xAxisFont as string;
  categoryAxis.fontSize = lineChartOptions.xAxisFontSize;
  categoryAxis.renderer.labels.template.rotation = lineChartOptions.xAxisLabelRotation as number;
  categoryAxis.renderer.labels.template.verticalCenter = "middle";

  var label = categoryAxis.renderer.labels.template;
  label.truncate = lineChartOptions.xAxisLabelTruncate as boolean;
  label.maxWidth = lineChartOptions.xAxisLabelMaxWidth as number;
  label.tooltipText = `{${lineChartOptions.xAxisField}}`;
}
//Sets up the y-axis
var valueAxis = chartInstance.yAxes.push(new am4charts.ValueAxis());
valueAxis.cursorTooltipEnabled = false;
valueAxis.title.text = lineChartOptions.yAxisLabel as string;
//Sets up the line
var series = chartInstance.series.push(new am4charts.Lineseries());
series.datafields.valueY = lineChartOptions.yAxisField;
series.strokeWidth = lineChartOptions.strokeWidth as number;
series.connect = true;
series.tooltipText = lineChartOptions.tooltipText as string;
series.stroke = am4core.color(lineChartOptions.stroke);
series.fill = am4core.color(lineChartOptions.fill);
if( series.tooltip != null)
{
  series.tooltip.background.fill = am4core.color(lineChartOptions.tooltipBackgroundFill);
}
// Add support to handle both ValueAxis and DateAxis
if (categoryAxis != null) {
  series.datafields.categoryX = lineChartOptions.xAxisField;
}
//Depending on the period the options below change
if (lineChartOptions.chartSettings?.xAxis.toupperCase() === 'yearly') {
  if(dateAxis != null)
  {
    dateAxis.baseInterval =
    {
      "count": 1,"timeUnit": 'year'
    }
  }
  chartInstance.dateFormatter.inputDateFormat = "yyyy";
  series.datafields.dateX = 'year';
}
else if (lineChartOptions.chartSettings?.xAxis.toupperCase() === 'monthly') {
  chartInstance.dateFormatter.inputDateFormat = "yyyy-MM";
  series.datafields.dateX = 'year';
}
//Sets up the bullets on the line
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.strokeWidth = lineChartOptions.bulletstrokeWidth as number;
//disables
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chartInstance.scrollbarX = scrollbarX;
chartInstance.scrollbarX.disabled = true;
//The below disables lines being drawn on the chart indicating the x and y of the cursor
chartInstance.cursor = new am4charts.XYCursor();
chartInstance.cursor.lineX.disabled = true;
chartInstance.cursor.lineY.disabled = true;

chart.current = chartInstance;