从零开始的JavaScript入门-使用JS绘制柱状图与折线图

最新推荐文章于 2024-10-02 08:00:00 发布

原创

最新推荐文章于 2024-10-02 08:00:00 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#柱状图 #折线图 #JavaScript #html

这篇博客介绍了如何使用JavaScript从零开始绘制柱状图和折线图，这两种图表在数据可视化中非常常见。文章展示了示例代码，并指出只需简单修改即可将折线图转换为柱状图。数据定义为一维数组，颜色等参数可根据需求调整。

上一篇博客讲解了如何使用JS绘制美观的热图，本篇准备讲解一下最基本的统计图：柱状图与折线图。

这两个图其实本质上是一样的。老样子，先上效果：

再上代码：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <style>
   </style>
   <body style="height: 100%; margin: 0;background-color:#000">
       <div id="container" style="width: 30%;height: 30%"></div>
       </div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script