Antv/G2 分组柱状图+折线图双轴图表

最新推荐文章于 2024-08-19 17:04:41 发布

＊且听风吟

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量380

点赞数

分类专栏： # html 文章标签：前端

本文链接：https://blog.csdn.net/hh18700418030/article/details/134447163

版权

本文介绍了如何使用Antv G2库来构建一个结合了分组柱状图和折线图的双轴图表。这种图表在数据可视化中常用于对比不同类别数据的趋势和总量。通过实例展示了具体步骤和关键代码，帮助前端开发者实现复杂的数据展示需求。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height">
  <title>分组柱状图+折线图双轴图表</title>
  <style>::-webkit-scrollbar{
     display:none;}html,body{
     overflow:hidden;height:100%;margin:0;}
  #chartcontainer {
     
    margin: 50px auto;
    text-align: center;
  }
</style>
</head>
<body>
  <div id="chartcontainer"></div>
  <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
  <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/dist/g2.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script>
  <script>
  <!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart