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;
解决方案
推荐阅读
- sql - 由于广播而在 Spark 中长时间执行 SQL 查询
- azure - Azure 服务应用程序 - 配置启动主机以使用不记名令牌
- python - Pytorch 中的 Sigmoid 函数破坏了梯度计算
- python - PYTHON:解决 y=a+b*x 其中 x 是预定义列表
- flutter - 为什么在flutter中使用provider时不执行类的构造函数?
- sql - 从一个数据库读取到另一个数据库
- php - phpmailer 发送的部分邮件收不到,普通邮件客户端软件发送则正常
- angular - NativeScript + Angular:如何安装和使用图标?
- javascript - Ajax 请求返回 200 OK,但触发了错误事件而不是成功 || xlswriter
- jboss - 无法将 postgres 与 keycloak 一起使用