调用jQuery .load()刷新Crypto Charts图表div返回空白问题求助

问题核心原因 #

• 变量作用域错误：newData函数中使用var重新声明了addedAlt和totalList，修改的仅为函数内的局部变量，全局生效的列表数据并未更新
• 刷新逻辑错误：$( "#mychart" ).load()方法请求的是当前页面的原始静态HTML，原始HTML中#mychart容器本身就是空节点，Crypto Charts是客户端渲染生成的图表，仅替换容器内容不会自动重新执行初始化逻辑，因此会出现空白

解决方案 #

你不需要用AJAX加载容器，直接把图表初始化逻辑抽为公共函数，每次数据更新后清空旧容器、重新调用初始化函数即可。

修正后的JS代码 #

// 默认币种列表
var defaultAlts = ["BTC", "ETH", "ADA", "BNB", "XRP", "UNI"];
// 自定义添加的币种列表
var addedAlt = [];
// 时间周期 默认90天
var timeframe = 90;

// 抽离公共的图表渲染函数
function renderChart() {
    // 清空旧图表容器
    document.getElementById("mychart").innerHTML = '';
    // 拼接最新的币种列表
    const totalList = addedAlt.concat(defaultAlts);
    // 重新初始化Crypto Charts
    CryptoCharts.roiComparison({
        chart_id: "mychart",
        cryptocompare_tickers: totalList,
        last_days: timeframe,
        options: {
          colors: ["#88AA24","#EF1273","#122673","#000000"],
          title: true,
          chart: {
            type: 'line'
          }
        }
    });
}

// 页面首次加载渲染初始图表
renderChart();

// 添加新币种逻辑
function newData() {
    const newAlt = document.getElementById("submitbox").value.trim();
    if (!newAlt) return; // 空输入直接返回
    // 不要重复添加同一币种
    if (!addedAlt.includes(newAlt) && !defaultAlts.includes(newAlt)) {
        addedAlt.push(newAlt);
    }
    // 重新渲染图表
    renderChart();
    // 清空输入框
    document.getElementById("submitbox").value = '';
}

// 修改时间周期逻辑
function changeTimeframe() {
    const newTimeframe = document.getElementsByClassName("timeframe")[0].value.trim();
    const timeframeInteger = parseInt(newTimeframe);
    // 校验输入合法性
    if (isNaN(timeframeInteger) || timeframeInteger < 1) return;
    timeframe = timeframeInteger;
    // 重新渲染图表
    renderChart();
}

额外优化说明 #

• 新增了输入合法性校验，避免空值、非法数值导致的渲染异常
• 新增了币种去重逻辑，避免重复添加同一币种导致的图表异常

内容的提问来源于stack exchange，提问作者Canadian-Coder