如何使用JavaScript通过HTML输入自动更新DataTable实现饼图动态更新

修复后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
        .td {
            display: inline-block;
            width: 120px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div>
        <div class="content"></div>
        <div class="table">
            <div class="tr">
                <div class="td">Ativo </div>
                <div class="td">Quota % </div>
                <div class="td">Perda Potencial % </div>
            </div>
            <div class="tr">
                <div class="td"><input type="text" size="5" value="TSLA" class="stock" id="ativo1" /> </div>
                <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota1" /> </div>
                <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda1" /> </div>
            </div>
            <div class="tr">
                <div class="td"><input type="text" size="5" value="AAPL" class="stock" id="ativo2" /> </div>
                <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota2" /> </div>
                <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda2" /> </div>
            </div>
            <div class="tr">
                <div class="td"><input type="text" size="5" value="MSFT" class="stock" id="ativo3" /> </div>
                <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota3" /> </div>
                <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda3" /> </div>
            </div>
            <div class="tr">
                <div class="td"><input type="text" size="5" value="EURUSD" class="stock" id="ativo4" /> </div>
                <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota4" /> </div>
                <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda4" /> </div>
            </div>
            <div class="tr">
                <div class="td"><input type="text" size="5" value="BITCOIN" class="stock" id="ativo5" /> </div>
                <div class="td"><input type="number" min="0" max="20" value="20" class="quota" id="quota5" /> </div>
                <div class="td"><input type="number" min="0" max="100" value="0" class="perda" id="perda5" /></div>
            </div>
        </div>
        <div id="piechart" style="width: 900px; height: 500px;"></div>
    </div>
    <script>
        let chart;
        // 统一监听所有输入框变动
        document.querySelector(".table").addEventListener("input", function (e) {
            const tgt = e.target;
            if (tgt.classList.contains("perda")) {
                // 计算对应配额
                const quotaInput = tgt.closest(".tr").querySelector(".quota");
                quotaInput.value = 20 - (Number(tgt.value) * 0.20);
            }
            // 每次输入都重新渲染图表
            drawChart();
        })

        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            // 实时读取所有输入框的最新值
            const data = new google.visualization.DataTable();
            data.addColumn('string', 'Ativo');
            data.addColumn('number', 'Quota');
            data.addRows([
                [document.getElementById('ativo1').value, Number(document.getElementById('quota1').value)],
                [document.getElementById('ativo2').value, Number(document.getElementById('quota2').value)],
                [document.getElementById('ativo3').value, Number(document.getElementById('quota3').value)],
                [document.getElementById('ativo4').value, Number(document.getElementById('quota4').value)],
                [document.getElementById('ativo5').value, Number(document.getElementById('quota5').value)],
                ['Perda', 1]
            ]);
            const options = {
                title: 'Calculadora'
            };
            if (!chart) {
                chart = new google.visualization.PieChart(document.getElementById('piechart'));
            }
            chart.draw(data, options);
        }
    </script>
</body>
</html>

核心修改点 #

• 移除了初始化时静态存储输入值的变量，每次渲染图表时实时读取输入框最新内容，确保数据同步
• 统一通过事件委托监听所有输入框的变动，任何修改都会触发drawChart方法重新渲染饼图
• 优化了图表实例的复用，避免每次渲染都重复创建实例
• 移除了无效的changeFunction和冗余的onchange属性

现在修改任意输入框都会自动同步到饼图：修改股票名称对应切片名称同步变更，修改损失率会自动计算配额后更新饼图占比。

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