当前位置：首页 > JavaScript

js实现柱状图排序

2026-03-01 23:51:56JavaScript

使用 D3.js 实现柱状图排序

D3.js 是一个强大的 JavaScript 库，适合用于数据可视化。以下是使用 D3.js 实现柱状图排序的步骤。

安装 D3.js：

<script src="https://d3js.org/d3.v7.min.js"></script>

创建 SVG 容器：

const svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 300);

绑定数据并绘制初始柱状图：

const data = [10, 20, 30, 40, 50];
const rects = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 50)
    .attr("y", d => 300 - d * 5)
    .attr("width", 40)
    .attr("height", d => d * 5)
    .attr("fill", "steelblue");

添加排序按钮和逻辑：

d3.select("body").append("button")
    .text("Sort")
    .on("click", function() {
        data.sort((a, b) => b - a); // 降序排序
        rects.data(data)
            .transition()
            .duration(1000)
            .attr("x", (d, i) => i * 50)
            .attr("y", d => 300 - d * 5)
            .attr("height", d => d * 5);
    });

使用 Chart.js 实现柱状图排序

Chart.js 是一个简单易用的图表库，适合快速实现排序功能。

安装 Chart.js：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

创建柱状图：

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['A', 'B', 'C', 'D', 'E'],
        datasets: [{
            label: 'Data',
            data: [10, 20, 30, 40, 50],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: { responsive: true }
});

添加排序功能：

document.getElementById('sortBtn').addEventListener('click', () => {
    const sortedData = [...chart.data.datasets[0].data].sort((a, b) => b - a);
    chart.data.datasets[0].data = sortedData;
    chart.update();
});

纯 JavaScript 实现柱状图排序

如果不依赖第三方库，可以使用纯 JavaScript 和 CSS 实现。

HTML 结构：

<div class="chart-container">
    <div class="bar" style="height: 10%;"></div>
    <div class="bar" style="height: 20%;"></div>
    <div class="bar" style="height: 30%;"></div>
    <div class="bar" style="height: 40%;"></div>
    <div class="bar" style="height: 50%;"></div>
</div>
<button id="sortBtn">Sort</button>

JavaScript 排序逻辑：

document.getElementById('sortBtn').addEventListener('click', () => {
    const bars = Array.from(document.querySelectorAll('.bar'));
    bars.sort((a, b) => 
        parseFloat(b.style.height) - parseFloat(a.style.height)
    );
    const container = document.querySelector('.chart-container');
    container.innerHTML = '';
    bars.forEach(bar => container.appendChild(bar));
});

CSS 样式：

.chart-container {
    display: flex;
    height: 300px;
    align-items: flex-end;
    gap: 10px;
}
.bar {
    width: 40px;
    background-color: steelblue;
    transition: height 0.5s;
}

以上方法分别使用 D3.js、Chart.js 和纯 JavaScript 实现了柱状图的排序功能，可根据项目需求选择适合的方案。

js实现柱状图排序