JavaScript 如何做图表

平时我们刷外卖APP看销售趋势、用办公软件分析月度业绩、甚至刷短视频时看到的播放量曲线，背后大多藏着「数据可视化图表」。而在网页上做这些图表，最常用的工具就是JavaScript。不用复杂的后端代码，只要几行简单的前端代码，就能把枯燥的数字变成一眼看懂的图表。

选对工具，不用从零写代码

很多人觉得做图表要自己画线条、算坐标，太麻烦。其实现在有现成的「JavaScript图表库」，就像买家具不用自己砍木头，直接组装现成的零件就行。目前最常用的是两个：一个是适合新手、文档好懂的ECharts（国内百度做的，中文资料多），另一个是轻量、适合简单图表的Chart.js，加载快不占内存。

举个生活化的例子：你想给家里的月度奶茶消费做个饼图，不用自己拿圆规量比例，用ECharts只要准备好「数据」（每个月花了多少钱），再选「饼图」类型，剩下的样式（颜色、标签位置）都能选，就像点外卖选规格一样简单。

步快速做图表，新手也能上手

做网页上的JS图表，核心就是3步，每一步都有明确的操作，跟着走就能出结果：

第一步：先把工具引入网页。就像煮面要先拿锅，JS图表库也要先「装」到网页里。新手不用下载文件，直接用网上的免费链接就行。比如用ECharts，只要在网页的<head>标签里加一行代码：<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>，这就相当于把「煮面的锅」摆好了。

第二步：给图表留个「展示位置」。就像煮面要拿个碗盛，得在网页里画个区域放图表。在网页的<body>里加个空的<div>标签，给它起个名字，比如<div id="myChart" style="width:600px;height:400px;"></div>，这里设置的宽高，就是图表的大小，就像选多大的碗盛面。

第三步：写JS代码填数据。这是最核心的一步，相当于「放面加调料」。要做一个简单的柱状图，比如记录自己一周的跑步距离，只要把准备好的数据写成数组，再告诉JS用什么类型的图表、显示什么内容就行。比如：先找到刚才的<div>，用JS把它变成图表容器，再把跑步数据放进去，代码就这么几行，不用复杂的运算，把数字填对就好。

避开新手常踩的小坑

刚开始做很容易出错，记住两个小细节就能避免：

第一个是图表容器的大小，要是没给<div>设宽高，图表会变成一条细线，就像把面装在小碟子上，根本放不下；

第二个是数据格式，图表要的是「成对的内容」，比如「周一跑了3公里」，不能只写3，要把类别和数值对应好，就像点外卖要写清楚「买的什么、花了多少钱」，不然图表不知道该怎么画。

灵活调整，图表也能个性化

做好基础图表后，还能像换衣服一样调整样式：比如把柱状图的颜色换成自己喜欢的、加上鼠标 hover 显示具体数值的提示、甚至把柱状图改成折线图，只要改一行代码选类型就行。比如把跑步的柱状图改成折线图，只要把代码里的type: 'bar'改成type: 'line'，就能看到一周跑步的趋势线，就像把同款食材换成不同做法的菜，味道完全不同但还是用的同一套工具。

总的来说，JavaScript做网页图表，核心就是「选现成工具→留位置→填数据」，不用懂复杂的绘图原理，只要会用简单的代码和现成的库，就能把数字变成实用又好看的图表，不管是记录日常小事还是分析工作数据，都能轻松搞定。