AmCharts 5股票图表切换年份数据加载触发问题求助

将10多年的15分钟K线（蜡烛图）数据按年份拆分以提升加载速度，修改AmCharts示例代码时，切换年份能在控制台看到新数据文件（如2023_day.js）已加载，但无法触发图表加载新数据，也不清楚如何将年份传递给index.js中的loadData函数。目前单个数据文件可正常加载图表。

index.js 中的 loadData 函数 #

function loadData(ticker, series, granularity) {
    var data = (window)["2023" + "_" + granularity];
    am5.array.each(series, function(item) {
        item.data.setAll(data);
    });
}

index.html 代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>GBPJPY Chart</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="chartcontrols" style="padding-left:15px"></div>
<div id="chartdiv"></div>
<script src="../index.js"></script>
<script src="../xy.js"></script>
<script src="../stock.js"></script>
<script src="../themes/Animated.js"></script>

<!--<script src="./data/2023_day.js"></script>-->

<select onChange="changeYear(this.value);">
    <option value="-">Select Study Year</option>
    <option value="2023">2023</option>
    <option value="2022">2022</option>
    <option value="2021">2021</option>
    <option value="2020">2020</option>
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
    <option value="2013">2013</option>  
</select>

<div id="output">
<script id="year" type="text/javascript" src="./data/2023_day.js"></script>
</div>

<script type="text/javascript">
function changeYear(value) {
    console.log(value);
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "./data/"+value+"_day.js";
    s.innerHTML = null;
    s.id = "year";
    document.getElementById("output").innerHTML = "";
    document.getElementById("output").appendChild(s);
    console.log(s.src);
}
</script>

<script src="index.js"></script>

<div id="chartdiv"></div>   

</body>
</html>

数据文件格式示例（如2019_day.js） #

window["2019_day"] = [
  {Date:1546318800000,Open:139.82,High:139.82,Low:139.82,Close:139.82,Volume:3},
  {Date:1546319700000,Open:139.82,High:139.82,Low:139.82,Close:139.82,Volume:3},
  {Date:1546320600000,Open:139.82,High:139.82,Low:139.82,Close:139.82,Volume:3},
  {Date:1546321500000,Open:139.82,High:139.82,Low:139.82,Close:139.82,Volume:3},
  {Date:1546322400000,Open:139.89,High:139.89,Low:139.83,Close:139.83,Volume:3},
]

1. 修改 loadData 函数，支持动态年份 #

把硬编码的2023改成接收传入的year参数，实现动态获取对应年份的数据：

function loadData(ticker, series, granularity, year) {
    // 拼接数据键名，比如"2023_day"
    var dataKey = year + "_" + granularity;
    var data = window[dataKey];
    
    if (data) {
        // 更新所有系列的数据
        am5.array.each(series, function(item) {
            item.data.setAll(data);
        });
    } else {
        console.error("未找到对应数据：" + dataKey);
    }
}

2. 全局存储图表系列（Series） #

在初始化图表的代码中，把创建好的蜡烛图系列存到全局变量，确保changeYear函数可以调用到：

// 声明全局变量存储系列
window.chartSeries = [];

// 创建蜡烛图系列时（示例代码，需匹配你的实际初始化逻辑）
var candlestickSeries = chart.series.push(am5xy.CandlestickSeries.new(root, {
    name: "GBPJPY",
    xAxis: xAxis,
    yAxis: yAxis,
    valueXField: "Date",
    openValueYField: "Open",
    highValueYField: "High",
    lowValueYField: "Low",
    valueYField: "Close"
}));

// 将系列加入全局数组
window.chartSeries.push(candlestickSeries);

3. 修改 changeYear 函数，在脚本加载完成后触发图表更新 #

脚本加载是异步操作，必须等脚本加载完成后再调用loadData，否则会拿不到数据：

function changeYear(value) {
    // 选择默认选项时直接返回
    if (value === "-") return;
    
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = "";
    
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "./data/" + value + "_day.js";
    s.id = "year";
    
    // 脚本加载成功后更新图表
    s.onload = function() {
        // 调用loadData，传入年份、全局系列等参数
        loadData("GBPJPY", window.chartSeries, "day", value);
        console.log("已成功加载并更新" + value + "年数据");
    };
    
    // 加载失败时提示错误
    s.onerror = function() {
        console.error("加载数据文件失败：" + s.src);
    };
    
    outputDiv.appendChild(s);
}

4. 修复 HTML 中的冗余问题 #

• 移除重复的<div id="chartdiv"></div>，保留一个即可；
• 移除重复的<script src="index.js"></script>，头部已经引入了../index.js，确保路径正确。

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