当前位置：首页 > JavaScript

js导入数组实现柱状图

2026-01-31 10:50:11JavaScript

使用Chart.js库绘制柱状图

安装Chart.js库

npm install chart.js

导入Chart.js和数组数据

import { Chart } from 'chart.js/auto';

const data = {
  labels: ['一月', '二月', '三月', '四月', '五月'],
  datasets: [{
    label: '月度销售额',
    data: [65, 59, 80, 81, 56],
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1
  }]
};

创建柱状图

js导入数组实现柱状图

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

使用纯JavaScript和Canvas绘制柱状图

准备HTML结构

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

JavaScript实现代码

js导入数组实现柱状图

const canvas = document.getElementById('barChart');
const ctx = canvas.getContext('2d');

const data = [45, 76, 32, 89, 54];
const labels = ['A', 'B', 'C', 'D', 'E'];
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'];

const maxValue = Math.max(...data);
const barWidth = 50;
const gap = 30;
const startX = 60;

ctx.font = '12px Arial';

// 绘制柱状图
data.forEach((value, index) => {
  const barHeight = (value / maxValue) * 200;
  const x = startX + index * (barWidth + gap);
  const y = canvas.height - barHeight - 30;

  ctx.fillStyle = colors[index];
  ctx.fillRect(x, y, barWidth, barHeight);

  // 添加数据标签
  ctx.fillStyle = '#000';
  ctx.fillText(labels[index], x + barWidth/2 - 5, canvas.height - 10);
  ctx.fillText(value, x + barWidth/2 - 5, y - 5);
});

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(30, 20);
ctx.lineTo(30, canvas.height - 30);
ctx.lineTo(canvas.width, canvas.height - 30);
ctx.stroke();

使用D3.js库绘制柱状图

安装D3.js

npm install d3

D3.js实现代码

import * as d3 from 'd3';

const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const width = 600;
const height = 400;
const padding = 40;

const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const xScale = d3.scaleBand()
  .domain(d3.range(dataset.length))
  .range([padding, width - padding])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset)])
  .range([height - padding, padding]);

svg.selectAll('rect')
  .data(dataset)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  .attr('width', xScale.bandwidth())
  .attr('height', d => height - padding - yScale(d))
  .attr('fill', 'steelblue');

// 添加坐标轴
svg.append('g')
  .attr('transform', `translate(0, ${height - padding})`)
  .call(d3.axisBottom(xScale));

svg.append('g')
  .attr('transform', `translate(${padding}, 0)`)
  .call(d3.axisLeft(yScale));

以上三种方法均可实现基于数组数据的柱状图绘制，开发者可根据项目需求选择合适的实现方式。Chart.js适合快速实现标准图表，纯JavaScript适合轻量级需求，D3.js则提供更强大的数据可视化功能。