如何通过JavaScript onclick事件无刷新更换Google图表数据源文件？

当然可行！你只需要用**异步请求（AJAX）**动态获取新的数据源，然后重新绘制Google图表就可以实现无刷新切换。下面是具体的实现方案，我会一步步帮你修改现有代码：

1. 拆分PHP数据接口 #

首先把原来嵌入HTML的PHP数据处理逻辑抽成一个单独的API文件，专门负责根据传入的chartname返回格式化好的图表数据。这样前端可以通过AJAX请求不同的数据源：

创建get_chart_data.php文件：

<?php
// 获取传入的chartname参数，默认空字符串
$chartname = $_GET['chartname'] ?? '';
$filename = "Charts/Chart_" . $chartname . ".txt";
$response = [];

if (file_exists($filename)) {
    $page = file_get_contents($filename);
    $data = json_decode($page, true);
    $chartData = [];
    
    // 遍历数据并格式化（去掉逗号、转换为对应类型）
    foreach ($data["Chart"] as $index => $entry) {
        $chartData[] = [
            (string)$index,
            (float)str_replace(",", "", $entry["high"]),
            (float)str_replace(",", "", $entry["open"]),
            (float)str_replace(",", "", $entry["close"]),
            (float)str_replace(",", "", $entry["low"])
        ];
    }
    
    $response['success'] = true;
    $response['data'] = $chartData;
} else {
    $response['success'] = false;
    $response['message'] = "指定的数据源文件不存在";
}

// 设置响应头为JSON格式
header('Content-Type: application/json');
echo json_encode($response);
?>

2. 修改前端HTML和JavaScript #

接下来修改你的主页面，添加切换按钮，并通过fetch API异步请求数据、重新绘制图表：

<!DOCTYPE html>
<html>
<head>
    <title>Crypto Currency Trader</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        // 加载Google图表库
        google.charts.load('current', {'packages':['corechart']});
        
        // 页面加载完成后默认加载初始数据（比如bitcoin）
        google.charts.setOnLoadCallback(() => {
            loadChartData('bitcoin');
        });

        // 封装加载数据并绘制图表的函数
        function loadChartData(chartname) {
            // 用fetch发送异步请求，注意对chartname编码防止特殊字符问题
            fetch(`get_chart_data.php?chartname=${encodeURIComponent(chartname)}`)
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        // 将返回的数组数据转换为Google图表需要的格式
                        const data = google.visualization.arrayToDataTable(result.data, true);
                        const options = { legend: 'none' };
                        // 获取图表容器并重新绘制
                        const chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
                        chart.draw(data, options);
                    } else {
                        alert('加载数据失败：' + result.message);
                    }
                })
                .catch(error => {
                    console.error('请求出错:', error);
                    alert('请求数据时发生错误，请稍后重试');
                });
        }
    </script>
</head>
<body>
    <!-- 添加切换按钮，点击时传入不同的chartname -->
    <div style="margin: 1rem;">
        <button onclick="loadChartData('bitcoin')">比特币数据</button>
        <button onclick="loadChartData('ethereum')">以太坊数据</button>
        <button onclick="loadChartData('litecoin')">莱特币数据</button>
    </div>
    <!-- 图表容器 -->
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>

3. 关键说明 #

• 无刷新核心：通过fetch异步请求新数据，不需要刷新整个页面，只更新图表区域。
• 参数安全：用encodeURIComponent处理chartname，避免特殊字符导致的URL解析错误。
• 错误处理：添加了请求失败、文件不存在的提示，提升用户体验。
• 原代码修正：修复了你原代码中$bitcoinkurse的笔误（应该是$filename）。

这样你点击不同的按钮，就可以无刷新切换对应的数据源文件了！

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