问题描述
我有一个测试站点: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;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)