Firefox中多amCharts图表仅显示首个的问题求助

问题概述 #

同一页面加载多个amCharts图表时，Chrome、Edge可正常显示所有图表，但Firefox仅渲染第一个，其余图表无内容。

核心原因 #

第二个图表的日期轴配置错误，导致Firefox无法正确解析日期数据，进而无法渲染图表：

• 日期格式不匹配：数据中日期为dd.MM.yyyy格式，但图表未指定inputDateFormat，仅设置了显示用的dateFormat: "MMMM yy"。不同浏览器对日期字符串的解析逻辑存在差异，Chrome/Edge能兼容该不匹配，Firefox则无法识别数据中的日期格式，导致图表无数据可展示。
• 格式化器冗余创建：为第二个图表的日期轴单独创建了DateFormatter实例，却未关联正确的输入格式，进一步加剧了日期解析失败的问题。

修复步骤 #

1. 为第二个图表设置inputDateFormat，与数据中的dd.MM.yyyy格式对应；
2. 复用图表自身的dateFormatter，避免重复创建实例；
3. 修正第一个图表中月份索引的错误（JavaScript月份从0开始，原代码中2022, 01实际代表二月，若需一月应改为2022, 00）。

修正后的完整代码 #

HTML #

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="gantt"></div>
<div id="dds"></div>

CSS #

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#gantt {
  width: 100%;
  height: 500px;
}

#dds {
  width: 100%;
  height: 500px;
}

JavaScript #

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var gantt = am4core.create("gantt", am4charts.XYChart);
gantt.hiddenState.properties.opacity = 0; // 初始淡入效果
gantt.paddingRight = 30;
gantt.dateFormatter.inputDateFormat = "dd.MM.yyyy";

var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;

gantt.data = [
  {
    category: 'First',
    fromDate: '01.01.2022',
    toDate: '01.03.2022',
    fromDateReal: '01.02.2022',
    toDateReal: '01.04.2022',
    colorPlan: colorSet.getIndex(0).brighten(0),
    colorReal: colorSet.getIndex(8).brighten(0)
  },
  {
    category: 'Second',
    fromDate: '01.02.2022',
    toDate: '01.05.2022',
    fromDateReal: '01.01.2022',
    toDateReal: '01.06.2022',
    colorPlan: colorSet.getIndex(0).brighten(0),
    colorReal: colorSet.getIndex(8).brighten(0)
  }
 ]


var categoryAxisGantt = gantt.yAxes.push(new am4charts.CategoryAxis());
categoryAxisGantt.dataFields.category = "category";
categoryAxisGantt.renderer.grid.template.location = 0;
categoryAxisGantt.renderer.inversed = true;
var yLabelGantt = categoryAxisGantt.renderer.labels.template;
yLabelGantt.wrap = true;
yLabelGantt.maxWidth = 200;

var dateAxisGantt = gantt.xAxes.push(new am4charts.DateAxis());
dateAxisGantt.dateFormatter.dateFormat = "dd.MM.yyyy";
dateAxisGantt.renderer.minGridDistance = 70;
// 修正：JavaScript月份从0开始，00代表一月
dateAxisGantt.min = (new Date(2022, 00, 01)).getTime();
dateAxisGantt.strictMinMax = true;
dateAxisGantt.renderer.tooltipLocation = 0;

var rangeGantt = dateAxisGantt.axisRanges.create();
rangeGantt.date = new Date();
rangeGantt.grid.stroke = am4core.color("red");
rangeGantt.grid.strokeWidth = 2;
rangeGantt.grid.strokeOpacity = 1;


function createGanttSeries(start, end, category, name, color){
    var series1Gantt = gantt.series.push(new am4charts.ColumnSeries());
    series1Gantt.columns.template.width = am4core.percent(80);
    series1Gantt.columns.template.tooltipText = "{name}\n{category}: {openDateX} - {dateX}";

    series1Gantt.dataFields.openDateX = start;
    series1Gantt.dataFields.dateX = end;
    series1Gantt.dataFields.categoryY = category;
    series1Gantt.name = name
    series1Gantt.columns.template.propertyFields.fill = color; // 从数据获取颜色
    series1Gantt.columns.template.propertyFields.stroke = color;
    series1Gantt.columns.template.strokeOpacity = 1;
}

// 计划
createGanttSeries("fromDate", "toDate", "category", "План", "colorPlan");

// 实际
createGanttSeries("fromDateReal", "toDateReal", "category", "Факт", "colorReal");


gantt.scrollbarX = new am4core.Scrollbar();



// 创建第二个图表实例
var chart = am4core.create("dds", am4charts.XYChart);
let title = chart.titles.create();
title.text = "ДДС";
title.fontSize = 25;
title.marginBottom = 30;
// 导出菜单
chart.exporting.menu = new am4core.ExportMenu();

// 修正：设置输入日期格式，匹配数据中的dd.MM.yyyy
chart.dateFormatter.inputDateFormat = "dd.MM.yyyy";
// 设置显示的日期格式（可按需调整）
chart.dateFormatter.dateFormat = "MMMM yy";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// 修正：复用图表已配置的dateFormatter
dateAxis.dateFormatter = chart.dateFormatter;


var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());



var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = "ДДС (план)";
columnSeries.dataFields.valueY = "val";
columnSeries.dataFields.dateX = "date";

columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} {dateX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle";
  
chart.data = [
  {
    "date": "06.10.2022",
    "val": 143566570.46,
    "total": 143566570.46
  },
  {
    "date": "09.25.2022",
    "val": 35891642.62,
    "total": 179458213.08
  }
];

内容的提问来源于stack exchange，提问作者lossburg