咨询：如何将Firebase实时房车Arduino数据转为WebView单竖条图表

嘿，我明白你想给父亲的房车做个直观的罐体状态监测，把纯文本改成实时竖条图表的需求——其实Chart.js完全能搞定这个，可能你之前没摸到正确的配置方式，我给你一套现成的、适配场景的解决方案：

核心思路 #

用Chart.js创建单数据点的条形图，然后通过Firebase的实时数据监听回调，动态更新这个数据点的数值并刷新图表，就能实现你要的实时更新效果。

完整代码实现 #

1. 基础HTML结构（WebView里的页面） #

<!DOCTYPE html>
<html>
<head>
    <title>房车罐体监测</title>
    <!-- 引入Chart.js和Firebase SDK -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
</head>
<body>
    <!-- 图表容器 -->
    <div style="width: 200px; margin: 20px auto;">
        <h3>*丙烷罐剩余量*</h3>
        <canvas id="tankChart"></canvas>
    </div>

    <script>
        // 初始化Firebase（替换成你的配置）
        const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_AUTH_DOMAIN",
            databaseURL: "YOUR_DATABASE_URL",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_STORAGE_BUCKET",
            messagingSenderId: "YOUR_SENDER_ID",
            appId: "YOUR_APP_ID"
        };
        firebase.initializeApp(firebaseConfig);
        const db = firebase.database();

        // 初始化单竖条图表
        const ctx = document.getElementById('tankChart').getContext('2d');
        const tankChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['剩余量'], // 单标签
                datasets: [{
                    label: '百分比',
                    data: [0], // 初始值，后续从Firebase获取
                    backgroundColor: '#4CAF50', // 默认绿色
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100, // 罐体满值是100%
                        ticks: {
                            stepSize: 20
                        }
                    }
                },
                animation: {
                    duration: 500 // 数据更新时的平滑动画
                }
            }
        });

        // 监听Firebase实时数据变化并更新图表
        db.ref('tanks/propane').on('value', (snapshot) => {
            const tankLevel = snapshot.val(); // 假设Firebase里存储的是0-100的百分比
            if (typeof tankLevel === 'number') {
                // 更新图表数据
                tankChart.data.datasets[0].data[0] = tankLevel;
                
                // 根据剩余量动态改变条形颜色（低于20%变红）
                if (tankLevel < 20) {
                    tankChart.data.datasets[0].backgroundColor = '#F44336';
                } else if (tankLevel < 50) {
                    tankChart.data.datasets[0].backgroundColor = '#FFC107';
                } else {
                    tankChart.data.datasets[0].backgroundColor = '#4CAF50';
                }
                
                // 刷新图表
                tankChart.update();
            }
        });
    </script>
</body>
</html>

关键细节说明 #

• 单竖条配置：通过给data.labels只设置一个标签，datasets.data只放一个数值，就能生成单竖条图表，完全适配你监测单个罐体的需求。
• 实时更新逻辑：利用Firebase的on('value')监听数据变化，每次获取到新的罐体百分比后，直接修改图表的data数组，再调用chart.update()触发更新，自带平滑动画效果。
• 人性化优化：根据剩余量设置不同颜色，低于20%红色预警、20-50%黄色提醒、50%以上绿色正常，父亲在手机上一眼就能看懂状态。
• WebView适配：代码用了CDN引入库，如果你担心网络问题，可以把Chart.js和Firebase SDK打包到本地，WebView加载本地文件更稳定。

如果要监测多个罐体（比如水箱+丙烷罐），只需要复制一份图表容器和初始化代码，修改Firebase的监听路径就行。

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