如何在网页用jQuery实现统计图？-网页设计-锦华智联科技

下面我将为你详细介绍几种主流的实现方式,并提供最常用、最推荐的方案—— ECharts 的详细步骤。

（图片来源网络，侵删）

核心思想

jQuery 是一个 JavaScript 库，主要用于简化 DOM 操作、事件处理、动画等，而图表（如柱状图、折线图、饼图等）是复杂的图形，需要专门的图表库来生成。

jQuery + 图表库 是最佳组合：

图表库 负责生成和渲染图表。
jQuery 负责在页面加载完成后，找到指定的 DOM 元素（比如一个 <div>），然后调用图表库的 API 来将图表绘制到这个元素中。

使用 ECharts (强烈推荐)

ECharts 是百度开源的一个非常强大、功能丰富、且交互性强的图表库，它是目前国内最流行、社区最活跃的图表库之一。

步骤 1：引入文件

在你的 HTML 文件中，引入 jQuery 和 ECharts 的库文件，你可以从官方网站下载，也可以使用 CDN（推荐，速度快）。

（图片来源网络，侵删）

<!-- 1. 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 2. 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

步骤 2：准备一个 DOM 容器

在 HTML 中，创建一个具有 id 的 div 元素，这个 div 将作为图表的“画布”。

<!-- 准备一个具备大小（宽高）的 DOM 容器 -->
<div id="main-chart" style="width: 800px; height: 400px;"></div>

步骤 3：使用 jQuery 初始化图表

在 <script> 标签中，使用 jQuery 的 $(document).ready() 函数来确保页面完全加载后再执行图表初始化代码。

<script>
    // 使用 jQuery 确保页面加载完成
    $(document).ready(function() {
        // 1. 基于准备好的dom，初始化echarts实例
        // 通过 jQuery 选择器找到我们的 div，并使用 .get(0) 或 [0] 获取其原生 DOM 对象
        var myChart = echarts.init(document.getElementById('main-chart'));
        // 2. 指定图表的配置项和数据
        var option = {
            title: {
                text: 'EjQuery 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar', // 图表类型：柱状图
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 3. 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
</script>

完整代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery + ECharts 示例</title>
    <style>
        #main-chart {
            margin: 50px auto;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <h1>我的第一个统计图</h1>
    <div id="main-chart" style="width: 800px; height: 400px;"></div>
    <!-- 1. 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 2. 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        // 使用 jQuery 确保页面加载完成
        $(document).ready(function() {
            // 通过 jQuery 选择器找到我们的 div，并使用 .get(0) 或 [0] 获取其原生 DOM 对象
            var myChart = echarts.init($('#main-chart').get(0));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'EjQuery 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar', // 图表类型：柱状图
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
    </script>
</body>
</html>

使用 Chart.js

Chart.js 是另一个非常流行且轻量级的图表库，上手简单，适合快速开发。

步骤 1：引入文件

<!-- 1. 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 2. 引入 Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

步骤 2：准备 DOM 容器

<canvas id="myChart" width="400" height="200"></canvas>

注意：Chart.js 使用 <canvas> 元素作为容器。

步骤 3：使用 jQuery 初始化图表

<script>
    $(document).ready(function() {
        // 获取 canvas 的 2D 上下文
        var ctx = $('#myChart').get(0).getContext('2d');
        // 创建一个新的 Chart 实例
        var myChart = new Chart(ctx, {
            type: 'bar', // 图表类型
            data: {
                labels: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                datasets: [{
                    label: '销量',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>

使用 Highcharts

Highcharts 是一个商业图表库，免费版有水印，但功能强大且文档齐全，商业项目使用广泛。

步骤 1：引入文件

<!-- 1. 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 2. 引入 Highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>

步骤 2：准备 DOM 容器

<div id="highcharts-container" style="width: 100%; height: 400px;"></div>

步骤 3：使用 jQuery 初始化图表

<script>
    $(document).ready(function() {
        $('#highcharts-container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Highcharts 与 jQuery'
            },
            xAxis: {
                categories: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {
                title: {
                    text: '销量'
                }
            },
            series: [{
                name: '2025年',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    });
</script>

注意：Highcharts 的 API 设计非常友好，可以直接在 jQuery 对象上调用 .highcharts() 方法。

总结与对比

特性	ECharts	Chart.js	Highcharts
开源协议	Apache 2.0 (宽松)	MIT (宽松)	商业 (免费版有水印)
图表类型	极其丰富，支持3D、地理、关系图等	丰富，覆盖常用图表	丰富，专业金融图表强大
易用性	配置项多，功能强大，学习曲线稍陡	非常简单，轻量级，上手快	API 设计优雅，文档清晰
社区/生态	国内最活跃，中文文档完善	国际流行，社区活跃	国际知名，商业支持好
推荐场景	国内首选，复杂、定制化需求	快速原型、轻量级项目、移动端	商业项目，预算充足，需要专业支持

最终建议

对于绝大多数开发者,强烈推荐从 ECharts 开始，它功能强大、免费、社区活跃，完全能满足从简单到复杂的各种图表需求，并且有完善的中文文档和示例。

记住核心流程：

HTML: 放一个 <div> 或 <canvas> 作为画布。
引入: 在 <head> 或 <body 底部引入 jQuery 和你选择的图表库。
初始化: 在 $(document).ready() 函数中，用 jQuery 找到画布，调用图表库的 API 来创建和配置图表。