初学者快速入门：使用JavaScript简单实现条形图，饼图，折线图，玫瑰图，散点图

最新推荐文章于 2025-05-30 09:04:30 发布
最新推荐文章于 2025-05-30 09:04:30 发布
阅读量904 收藏 5
点赞数 7
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sy_planA/article/details/148043981

目录

数据结构设计

工具函数

图表实现细节

1. 条形图（Bar Chart）

2. 饼图（Pie Chart）

3. 玫瑰图（Rose Chart）

4. 折线图（Line Chart）

5. 散点图（Scatter Chart）

响应式处理

样式设计

整体架构

代码使用纯 JavaScript 和 Canvas API 实现了五种基本图表，采用模块化设计：

  • 图表数据统一存储在data对象中
  • 使用ChartUtils工具类封装通用方法
  • 每种图表有独立的绘制函数
  • 添加了响应式处理，支持窗口大小变化时重绘

数据结构设计

const data = {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
    values: [65, 59, 80, 81, 56, 55],
    colors: ['#3B82F6', '#6366F1', '#8B5CF6', '#A855F7', '#C026D3', '#DB2777'],
    scatterData: Array.from({length: 20}, () => ({
        x: Math.random() * 300,
        y: Math.random() * 200,
        r: Math.random() * 10 + 5
    }))
};
  • labels和values用于大多数图表
  • colors定义了图表的配色方案
  • scatterData为散点图生成随机数据点

工具函数

const ChartUtils = {
    getColor: (index) => data.colors[index % data.colors.length],
    drawLabel: (ctx, text, x, y, align = 'center') => {
        ctx.save();
        ctx.font = '12px Inter';
        ctx.textAlign = align;
        ctx.textBaseline = 'middle';
        ctx.fillText(text, x, y);
        ctx.restore();
    }
};

  • getColor：循环使用预设颜色
  • drawLabel：封装文本绘制逻辑，保存 / 恢复上下文状态避免样式冲突

图表实现细节

1. 条形图（Bar Chart）
function drawBarChart() {
    // 计算边距和坐标系
    const margin = {top: 20, right: 20, bottom: 40, left: 40};
    const width = barChart.width - margin.left - margin.right;
    const height = barChart.height - margin.top - margin.bottom;
    const barWidth = width / data.labels.length * 0.7;
    const maxValue = Math.max(...data.values) * 1.1;
    
    // 绘制坐标轴
    barCtx.beginPath();
    barCtx.moveTo(margin.left, margin.top);
    barCtx.lineTo(margin.left, margin.top + height);
    barCtx.lineTo(margin.left + width, margin.top + height);
    barCtx.strokeStyle = '#ccc';
    barCtx.stroke();
    
    // 绘制条形和标签
    data.values.forEach((value, index) => {
        // 计算条形位置和高度
        const barHeight = (value / maxValue) * height;
        const x = margin.left + (width / data.labels.length) * index + (width / data.labels.length - barWidth) / 2;
        const y = margin.top + height - barHeight;
        
        // 绘制条形
        barCtx.fillStyle = ChartUtils.getColor(index);
        barCtx.fillRect(x, y, barWidth, barHeight);
        
        // 绘制标签
        ChartUtils.drawLabel(barCtx, value, x + barWidth / 2, y - 10);
        ChartUtils.drawLabel(barCtx, data.labels[index], x + barWidth / 2, margin.top + height + 20);
    });
}
  • 关键计算：根据最大值缩放高度，使用边距留出标签空间
  • 坐标轴绘制：使用 Canvas 路径绘制简单的 XY 轴
  • 数据可视化：通过矩形高度表示数值大小

代码效果展示：

2. 饼图（Pie Chart）
function drawPieChart() {
    // 计算中心点和半径
    const centerX = pieChart.width / 2;
    const centerY = pieChart.height / 2;
    const radius = Math.min(centerX, centerY) * 0.7;
    const total = data.values.reduce((a, b) => a + b, 0);
    let startAngle = 0;
    
    // 绘制扇形
    data.values.forEach((value, index) => {
        const sliceAngle = (value / total) * Math.PI * 2;
        const endAngle = startAngle + sliceAngle;
        
        // 绘制扇形
        pieCtx.beginPath();
        pieCtx.moveTo(centerX, centerY);
        pieCtx.arc(centerX, centerY, radius, startAngle, endAngle);
        pieCtx.closePath();
        pieCtx.fillStyle = ChartUtils.getColor(index);
        pieCtx.fill();
        
        // 绘制标签和连接线
        const labelAngle = startAngle + sliceAngle / 2;
        const labelX = centerX + Math.cos(labelAngle) * (radius * 1.2);
        const labelY = centerY + Math.sin(labelAngle) * (radius * 1.2);
        
        // 绘制连接线
        pieCtx.beginPath();
        pieCtx.moveTo(centerX + Math.cos(labelAngle) * radius, centerY + Math.sin(labelAngle) * radius);
        pieCtx.lineTo(labelX, labelY);
        pieCtx.strokeStyle = '#ccc';
        pieCtx.stroke();
        
        // 绘制标签文本
        ChartUtils.drawLabel(
            pieCtx,
            `${data.labels[index]} (${((value / total) * 100).toFixed(1)}%)`,
            labelX + (labelAngle > Math.PI/2 && labelAngle < Math.PI*3/2 ? -10 : 10),
            labelY,
            labelAngle > Math.PI/2 && labelAngle < Math.PI*3/2 ? 'right' : 'left'
        );
        
        startAngle = endAngle;
    });
}
  • 关键计算：使用弧度计算扇形角度（2π表示完整圆）
  • 标签优化：根据扇形位置智能调整标签对齐方式
  • 百分比计算：自动计算并显示每个扇形占总体的百分比

代码效果展示：

3. 玫瑰图（Rose Chart）
function drawRoseChart() {
    const centerX = roseChart.width / 2;
    const centerY = roseChart.height / 2;
    const maxRadius = Math.min(centerX, centerY) * 0.7;
    const maxValue = Math.max(...data.values);
    const angleStep = (Math.PI * 2) / data.labels.length;
    
    // 绘制扇形
    data.values.forEach((value, index) => {
        const angle = index * angleStep;
        const radius = (value / maxValue) * maxRadius;
        
        // 绘制扇形
        roseCtx.beginPath();
        roseCtx.moveTo(centerX, centerY);
        roseCtx.arc(centerX, centerY, radius, angle, angle + angleStep);
        roseCtx.closePath();
        roseCtx.fillStyle = ChartUtils.getColor(index);
        roseCtx.fill();
        roseCtx.strokeStyle = '#fff';
        roseCtx.lineWidth = 1;
        roseCtx.stroke();
        
        // 绘制标签
        const labelAngle = angle + angleStep / 2;
        const labelX = centerX + Math.cos(labelAngle) * (radius + 20);
        const labelY = centerY + Math.sin(labelAngle) * (radius + 20);
        
        ChartUtils.drawLabel(pieCtx, data.labels[index], labelX, labelY);
    });
}
  • 与饼图的区别：玫瑰图使用半径而非角度来表示数值大小
  • 角度计算：平均分配每个类别对应的角度
  • 视觉效果：通过不同半径的扇形形成花瓣状分布

代码效果展示：

4. 折线图（Line Chart）
function drawLineChart() {
    const margin = {top: 20, right: 20, bottom: 40, left: 40};
    const width = lineChart.width - margin.left - margin.right;
    const height = lineChart.height - margin.top - margin.bottom;
    const maxValue = Math.max(...data.values) * 1.1;
    
    // 绘制坐标轴
    lineCtx.beginPath();
    lineCtx.moveTo(margin.left, margin.top);
    lineCtx.lineTo(margin.left, margin.top + height);
    lineCtx.lineTo(margin.left + width, margin.top + height);
    lineCtx.strokeStyle = '#ccc';
    lineCtx.stroke();
    
    // 计算点的位置
    const points = data.values.map((value, index) => ({
        x: margin.left + (width / (data.labels.length - 1)) * index,
        y: margin.top + height - (value / maxValue) * height,
        value
    }));
    
    // 绘制折线
    lineCtx.beginPath();
    lineCtx.moveTo(points[0].x, points[0].y);
    points.forEach(point => {
        lineCtx.lineTo(point.x, point.y);
    });
    lineCtx.strokeStyle = '#3B82F6';
    lineCtx.lineWidth = 2;
    lineCtx.stroke();
    
    // 绘制数据点和标签
    points.forEach(point => {
        lineCtx.beginPath();
        lineCtx.arc(point.x, point.y, 5, 0, Math.PI * 2);
        lineCtx.fillStyle = '#3B82F6';
        lineCtx.fill();
        lineCtx.strokeStyle = '#fff';
        lineCtx.lineWidth = 1;
        lineCtx.stroke();
        
        // 绘制值标签和类别标签
        ChartUtils.drawLabel(lineCtx, point.value, point.x, point.y - 15);
        ChartUtils.drawLabel(lineCtx, data.labels[points.indexOf(point)], point.x, margin.top + height + 20);
    });
}
  • 点位置计算：根据数据值和最大值得出 Y 坐标，根据索引计算 X 坐标
  • 折线绘制：使用 Canvas 路径连接所有点
  • 视觉增强：在数据点周围添加白色边框提高可读性

代码效果展示：

5. 散点图（Scatter Chart）
function drawScatterChart() {
    const margin = {top: 20, right: 20, bottom: 20, left: 20};
    const width = scatterChart.width - margin.left - margin.right;
    const height = scatterChart.height - margin.top - margin.bottom;
    
    // 绘制坐标轴
    scatterCtx.beginPath();
    scatterCtx.moveTo(margin.left, margin.top);
    scatterCtx.lineTo(margin.left, margin.top + height);
    scatterCtx.lineTo(margin.left + width, margin.top + height);
    scatterCtx.strokeStyle = '#ccc';
    scatterCtx.stroke();
    
    // 绘制散点
    data.scatterData.forEach((point, index) => {
        scatterCtx.beginPath();
        scatterCtx.arc(
            margin.left + point.x,
            margin.top + height - point.y,
            point.r,
            0,
            Math.PI * 2
        );
        scatterCtx.fillStyle = ChartUtils.getColor(index);
        scatterCtx.fill();
        scatterCtx.strokeStyle = '#fff';
        scatterCtx.lineWidth = 1;
        scatterCtx.stroke();
    });
}
  • 数据结构：使用包含 x、y 坐标和半径的对象数组
  • 坐标映射：直接使用数据中的坐标值，减去边距进行偏移
  • 视觉变化：随机大小的点增加视觉丰富度

代码效果展示：

响应式处理

window.addEventListener('resize', () => {
    // 重置每个Canvas的尺寸并重绘
    barChart.width = barChart.offsetWidth;
    barChart.height = barChart.offsetHeight;
    drawBarChart();
    
    // 其他图表类似...
});
  • 监听窗口大小变化事件
  • 重置 Canvas 尺寸（重要：重置尺寸会清除画布内容）
  • 重新调用绘制函数

样式设计

  • 使用 Tailwind CSS 定义图表容器样式
  • 采用现代蓝色系配色方案
  • 添加悬停效果增强交互感
  • 合理使用阴影和圆角提升视觉层次

这个图表库实现了基本的数据可视化功能，通过模块化设计和清晰的代码结构，便于后续扩展更多图表类型或添加交互功能。

Sy_planA
关注
JavaScript实现绘制饼图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 440
JavaScript实现绘制饼图（附完整源码）
JS+canvas动态绘制饼图的方法示例
10-19
主要介绍了JS+canvas动态绘制饼图的方法,结合具体实例形式分析了js+canvas实现饼状图形绘制的相关操作技巧,需要的朋友可以参考下
JavaScript练手小技巧：用Canvas绘制饼图
九天翔龙的技术博客
12-09 1271
饼图是数据可视化很重要的一个组成部分。这个案例虽然没有 Echarts 那么好看，但是作为了解Canvas的基础案例，还是很有必要练习下。
1、纯JS代码生成图表函数——柱图
tsxnb的专栏
03-04 1447
1、纯JS代码生成图表函数——柱图function table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type){var tmdColor1 = new Array();tmdColor1[0] = "#d1ffd1";tmdColor1[1] = "#ffbbbb";tmdColor1[2]
Chart.js 入门指南：快速构建你的第一个数据可视化图表
最新发布
gitblog_01145的博客
05-30 454
Chart.js 入门指南：快速构建你的第一个数据可视化图表 什么是 Chart.js Chart.js 是一个功能强大且易于使用的开源 JavaScript 图表库，它允许开发者在网页中轻松创建各种类型的交互式数据可视化图表。作为目前最流行的前端图表库之一，Chart.js 具有轻量级、响应式设计和高度可定制等特点。 环境准备 在开始使用 Chart.js 之前，你需要确保具备以下基础环境： ...
前端开发者常用的9个JavaScript图表库
weixin_34414650的博客
11-14 586
当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。 对任何一个组织来说，如果能够充分的获取数据、可视化数据和分析数据，那么就能很大程度上帮助了解数据产生的深层次原因，以便据此做出正确的决定。 对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很...
JS画圆饼图
Mark的专栏
01-07 1096
JS画圆饼图function DrawPieChart() { var totalvalue = value1.value/360 + value2.value/360 + value3.value/360 + value4.value/360; var per1 = value1.value/totalvalue; var per2 = valu
利用js来画图形（例如：条状图，圆饼图等）
dengzhi9024的博客
09-03 520
背景：java开发的过程中，需要对数据进行可视化，这样方便客户理解此时的数据状态 语言：java，js，window7，echarts包文件 sample的例子下面的参照 https://www.echartsjs.com/examples/en/editor.html?c=line-sections html <!DOCTYPE html> <h...
13个JavaScript图表图形绘制插件
weixin_34258838的博客
02-23 654
现在网络上又有越来越多的免费的JavaScript图表图形绘制插件。我之前给一家网站做过复杂的图形，我们用的是 highchart。在那段时间，没有很多可供选择的插件。但现在不同了，很容易就可以找到很多功能非常不错的图表库。个人而言，此类插件的上升，是因为： 1. Flash 过去是最佳解决方案，但很多人多在从那迁移； 2. 现代浏览器及其更强大的计算能力，使其在转化绘制实时数据方面的能力更佳...
原生js实现饼图
weixin_56008510的博客
10-20 383
【代码】原生js实现饼图。
Python 企业数据证券数据分析可视化 条形图散点图饼图折线图 经济金融画图matplotlib
02-28
Python 企业数据证券数据分析可视化 条形图散点图饼图折线图 证券简称 是否跨境并购 营业利润/营业总收入\n[报告期] 2009年报\n[单位] % 营业利润/营业总收入\n[报告期] 2010年报\n[单位] % 营业利润/营业总收入\n...
html+js=条形图
09-09
不错的html js 制成的条形图，绝对实用
JS插件实现图表显示（曲线图表、柱形图表、饼状图表）
06-26
JS插件实现图表显示（曲线图表、柱形图表、饼状图表）
js生成饼图
05-09
一个完整的js生成饼图例子
JS实现柱形图和饼形图
07-03
javaScript实现柱形图和饼形图,里面有源码！
js实现统计图功能
09-03
这是一款非常强大的js动态统计图，各种各样，几乎能满足所有统计图的需求，有条形统计图，圆柱形的，还有折线图形，非常实用。
Python实现EXCEL图标自动生成OpenPyXL支持使用工作表单元格中的数据创建条形图，折线图，散点图和饼图
03-01
Python实现EXCEL图标自动生成OpenPyXL支持使用工作表单元格中的数据创建条形图，折线图，散点图和饼图。要制作图表，您需要执行以下操作：1. Reference从矩形选择的单元格创建对象。2. Series通过传入对象来创建...
统计图表选用指南：何时使用条形图、饼图、折线图等
本文主要介绍了如何在适当的场景中选择并使用不同的统计图表，包括条图、柱图、饼图、折线图、仪表图、雷达图、漏斗图、散点图和气泡图，以及它们各自的特点和适用情况。 统计图表在数据可视化中起着至关重要的作用...
Python实现EXCEL图标自动生成OpenPyXL支持使用工作表单元格中的数据创建条形图，折线图，散点图和饼图 要制作图表
01-30
Python实现EXCEL图标自动生成OpenPyXL支持使用工作表单元格中的数据创建条形图，折线图，散点图和饼图。要制作图表，您需要执行以下操作：1. Reference从矩形选择的单元格创建对象。2. Series通过传入对象来创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值