在线图表生成器 - 瑞索工具网

扫码体验

瑞索工具箱微信小程序

图表设置

选择图表类型

📊 柱状�?

📈 折线�?

🥧 饼图

🍩 环形�?

🕸�?/span> 雷达�?

❄️ 极地�?

图表标题数据输入

格式�?code>标签,数�?/code> 每行一条数�?br>
                                示例�?code>苹果,50</code>
                            </div>
                        </div>

<div class="mt-5 text-center">
                <a href="javascript:star_plugin()" class="btn btn-sm btn-outline-danger mr-3">
                    <em class="icon ni ni-heart"></em>
                    <span class="nk-menu-text" id="star-btn-text">收藏工具</span>
                </a>
                <a href="./" class="btn btn-sm btn-outline-light">
                    <em class="icon ni ni-reply-all"></em>
                    <span class="nk-menu-text">返回首页</span>
                </a>
            </div>
            <div class="ad-item ad-pos-tool_bottom" data-ad-id="3"><html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信小程序推广 Banner</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

/* Banner 主容器 */
        .miniapp-banner {
            width: 100%;
            background: #f5f5f5;
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

/* 标题文字区域 */
        .banner-text {
            text-align: center;
            margin-bottom: 20px;
        }

.banner-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }

.banner-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

.banner-desc strong {
            color: #07c160;
            font-weight: 600;
        }

/* 图片容器 */
        .banner-image-wrapper {
            max-width: 600px;
            width: 100%;
        }

.banner-image-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

/* 移动端适配 */
        @media (max-width: 768px) {
            .miniapp-banner {
                padding: 20px 15px;
            }

.banner-title {
                font-size: 20px;
            }

.banner-desc {
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="miniapp-banner">
        
        <div class="banner-text">
            <h1 class="banner-title">🚀 扫码体验微信小程序</h1>
            <p class="banner-desc">
                <strong>瑞索工具箱</strong> · <strong>轻心记</strong> · <strong>光阴日迹</strong><br>
                无需下载，即用即走，便捷高效的小工具集合
            </p>
        </div>

<div class="banner-image-wrapper">
            <img src="https://pan.butuan.cn/view.php/5eae04f453dea444d709e70548c55fe8.png" alt="微信小程序推广码 - 瑞索工具箱、轻心记、光阴日迹">
        </div>
    </div>
</body>
</html></div>        </div>
                
        <div class="nk-footer nk-footer-fluid bg-lighter">
    <div class="container-xl">
        <div class="nk-footer-wrap">
            <div class="nk-footer-copyright"> © 2026 瑞索工具网 <div style="text-align: center; padding: 0 20px 15px 20px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; 
background: linear-gradient(120deg, #f0f9f4, #f5f8fa); border-radius: 16px; margin: 0;
box-shadow: 0 4px 12px rgba(80, 180, 120, 0.08);">
    
    
    <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none; font-size: 15px; color: #6c7a89; letter-spacing: 1px; font-weight: 500;">
        鲁ICP备17012030号
    </a>

<div id="runTime" style="font-size: 14px; color: #27ae60; letter-spacing: 0.5px; margin: 8px 0 0 0;"></div>
</div>

function updateRunTime() {
    const now = new Date();
    let year = now.getFullYear() - startDate.getFullYear();
    let month = now.getMonth() - startDate.getMonth();
    let day = now.getDate() - startDate.getDate();

if (day < 0) {
        month--;
        const lastMonthDays = new Date(now.getFullYear(), now.getMonth(), 0).getDate();
        day += lastMonthDays;
    }
    if (month < 0) {
        year--;
        month += 12;
    }

const diffMs = now - startDate;
    const totalDay = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    const leaveMs = diffMs % (1000 * 60 * 60 * 24);
    const h = Math.floor(leaveMs / (1000 * 60 * 60));
    const m = Math.floor((leaveMs % (1000 * 60 * 60)) / (1000 * 60));
    const s = Math.floor((leaveMs % (1000 * 60)) / 1000);

const hour = h.toString().padStart(2, '0');
    const minute = m.toString().padStart(2, '0');
    const second = s.toString().padStart(2, '0');

document.getElementById('runTime').innerText = 
        `本站已安全运行${year}年${month}月${day}天 ${hour}:${minute}:${second}，共${totalDay}天`;
}

updateRunTime();
setInterval(updateRunTime, 1000);
</script>

var chartTypeBtns = document.querySelectorAll('.chart-type-btn');
    var colorPresets = document.querySelectorAll('.color-preset');
    var templateBtns = document.querySelectorAll('.template-btn');
    var generateBtn = document.getElementById('generateBtn');
    var clearBtn = document.getElementById('clearBtn');
    var dataInput = document.getElementById('dataInput');
    var chartTitle = document.getElementById('chartTitle');
    var downloadPng = document.getElementById('downloadPng');
    var downloadJpg = document.getElementById('downloadJpg');

chartTypeBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            chartTypeBtns.forEach(function(b) { b.classList.remove('active'); });
            this.classList.add('active');
            currentChartType = this.dataset.type;
        });
    });

colorPresets.forEach(function(preset) {
        preset.addEventListener('click', function() {
            colorPresets.forEach(function(p) { p.classList.remove('active'); });
            this.classList.add('active');
            currentColors = JSON.parse(this.dataset.colors);
        });
    });

var templates = {
        sales: "一�?120\n二月,190\n三月,300\n四月,250\n五月,200\n六月,320",
        survey: "非常满意,45\n满意,30\n一�?15\n不满�?7\n非常不满�?3",
        budget: "人力成本,40\n市场推广,25\n技术研�?20\n办公运营,10\n其他,5"
    };

templateBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var type = this.dataset.template;
            if (templates[type]) {
                dataInput.value = templates[type];
                showToast('模板已加�?);
            }
        });
    });

function parseData() {
        var input = dataInput.value.trim();
        if (!input) return null;

var lines = input.split('\n');
        var labels = [];
        var values = [];

for (var i = 0; i < lines.length; i++) {
            var line = lines[i].trim();
            if (!line) continue;

var parts = line.split(',');
            if (parts.length >= 2) {
                labels.push(parts[0].trim());
                values.push(parseFloat(parts[1].trim()) || 0);
            }
        }

return { labels: labels, values: values };
    }

function generateChart() {
        var data = parseData();
        if (!data || data.labels.length === 0) {
            showToast('请输入有效的数据');
            return;
        }

document.getElementById('emptyState').style.display = 'none';
        document.getElementById('chartWrapper').style.display = 'block';
        document.getElementById('chartWrapper').classList.add('active');
        document.getElementById('actionButtons').style.display = 'flex';
        document.getElementById('statsGrid').style.display = 'grid';

if (myChart) {
            myChart.destroy();
        }

var backgroundColors = [];
        for (var i = 0; i < data.labels.length; i++) {
            backgroundColors.push(currentColors[i % currentColors.length]);
        }
        var borderColors = backgroundColors;

var ctx = document.getElementById('myChart').getContext('2d');
        var title = chartTitle.value || '数据图表';

if (currentChartType === 'pie' || currentChartType === 'doughnut' || currentChartType === 'polarArea') {
                                    var total = context.dataset.data.reduce(function(a, b) { return a + b; }, 0);
                                    var percentage = ((context.parsed / total) * 100).toFixed(1);
                                    label += ' (' + percentage + '%)';
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: currentChartType === 'pie' || currentChartType === 'doughnut' || currentChartType === 'polarArea' || currentChartType === 'radar' ? {} : {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0,0,0,0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        };

myChart = new Chart(ctx, config);
        updateStats(data.values);
        showToast('图表生成成功�?);
    }

function updateStats(values) {
        var total = values.reduce(function(a, b) { return a + b; }, 0);
        var avg = (total / values.length).toFixed(1);
        var max = Math.max.apply(null, values);

document.getElementById('totalValue').textContent = total.toLocaleString();
        document.getElementById('avgValue').textContent = avg;
        document.getElementById('maxValue').textContent = max.toLocaleString();
        document.getElementById('dataCount').textContent = values.length;
    }

function clearData() {
        dataInput.value = '';
        chartTitle.value = '';
        if (myChart) {
            myChart.destroy();
            myChart = null;
        }
        document.getElementById('emptyState').style.display = 'block';
        document.getElementById('chartWrapper').style.display = 'none';
        document.getElementById('chartWrapper').classList.remove('active');
        document.getElementById('actionButtons').style.display = 'none';
        document.getElementById('statsGrid').style.display = 'none';
        showToast('数据已清�?);
    }

function downloadChart(format) {
        if (!myChart) return;

var canvas = document.getElementById('myChart');
        var link = document.createElement('a');
        link.download = '图表_' + new Date().getTime() + '.' + format;
        link.href = canvas.toDataURL('image/' + (format === 'jpg' ? 'jpeg' : 'png'), 1.0);
        link.click();
        showToast('图表已下载为 ' + format.toUpperCase());
    }

function showToast(message) {
        var toast = document.getElementById('toast');
        toast.textContent = message;
        toast.classList.add('show');
        setTimeout(function() {
            toast.classList.remove('show');
        }, 2500);
    }

generateBtn.addEventListener('click', generateChart);
    clearBtn.addEventListener('click', clearData);
    downloadPng.addEventListener('click', function() { downloadChart('png'); });
    downloadJpg.addEventListener('click', function() { downloadChart('jpg'); });

window.addEventListener('load', function() {
        generateChart();
    });
})();
</script>

</body>
</html>