当前位置：首页 > jquery

jquery 柱状图

2026-04-08 14:48:24jquery

jQuery 柱状图实现方法

使用 jQuery 结合图表库（如 Chart.js 或 Highcharts）可以快速实现柱状图功能。以下是两种常见方案：

使用 Chart.js 实现

Chart.js 是一个轻量级且灵活的库，适合快速集成。

引入依赖 在 HTML 文件中添加 jQuery 和 Chart.js 的 CDN 链接：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

创建画布容器

jquery 柱状图

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

通过 jQuery 初始化图表

$(document).ready(function() {
    const ctx = $('#barChart');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March'],
            datasets: [{
                label: 'Sales',
                data: [12, 19, 3],
                backgroundColor: 'rgba(75, 192, 192, 0.6)'
            }]
        },
        options: { responsive: true }
    });
});

使用 Highcharts 实现

Highcharts 提供更丰富的交互功能，适合复杂场景。

引入依赖

jquery 柱状图

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

创建容器

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

通过 jQuery 渲染图表

$(document).ready(function() {
    $('#barContainer').highcharts({
        chart: { type: 'column' },
        title: { text: 'Monthly Sales' },
        xAxis: { categories: ['Jan', 'Feb', 'Mar'] },
        yAxis: { title: { text: 'Amount' } },
        series: [{
            name: 'Sales',
            data: [29, 71, 40]
        }]
    });
});

自定义数据绑定

若需动态加载数据，可通过 AJAX 获取数据后更新图表：

$.get('/api/sales-data').done(function(response) {
    const chart = $('#barChart').data('chart');
    chart.data.labels = response.labels;
    chart.data.datasets[0].data = response.values;
    chart.update();
});