前端小白灬 2024-04-24 11:32 采纳率: 0%
浏览 15

antv/g2 如何利用facetRect分面做多个仪表盘

antv/g2 如何利用facetRect分面做多个仪表盘，目前试了下，只有柱状图折线图能实现

  • 写回答

7条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-24 11:32
    关注

    引自免费微信小程序：皆我百晓生

    在AntV G2 中，你可以使用 facetRect 来创建多个独立的仪表盘。这可以通过配置 facet 属性并结合数据分组来实现。下面是一个详细的步骤，以及一个示例代码来展示如何创建两个独立的仪表盘，每个包含一个柱状图和一个折线图。

    首先，确保已经安装了 AntV G2 库，如果没有，可以使用 npm 安装：

    npm install @antv/g2

    接下来是代码示例，我们将创建一个带有两个仪表盘的图表，每个仪表盘都包含一个柱状图（Bar Chart）和一个折线图（Line Chart）：

    import { Chart, Geom, Axis, Guide, Facet } from '@antv/g2';

// 假设我们有如下数据
const data = [
  { year: '1991', value: 3, type: 'bar' },
  { year: '1992', value: 4, type: 'bar' },
  { year: '1993', value: 3.5, type: 'bar' },
  { year: '1994', value: 5, type: 'bar' },
  { year: '1995', value: 4.9, type: 'bar' },
  { year: '1996', value: 6, type: 'bar' },
  { year: '1997', value: 7, type: 'bar' },
  { year: '1998', value: 9, type: 'bar' },
  { year: '1999', value: 13, type: 'bar' },
  { year: '2000', value: 18, type: 'bar' },

  // 折线图的数据
  { year: '1991', value: 3, type: 'line' },
  { year: '1992', value: 4, type: 'line' },
  { year: '1993', value: 3.5, type: 'line' },
  { year: '1994', value: 5, type: 'line' },
  { year: '1995', value: 4.9, type: 'line' },
  { year: '1996', value: 6, type: 'line' },
  { year: '1997', value: 7, type: 'line' },
  { year: '1998', value: 9, type: 'line' },
  { year: '1999', value: 13, type: 'line' },
  { year: '2000', value: 18, type: 'line' },
];

function createDashboard(data) {
  const chart = new Chart({
    container: 'container',
    autoFit: true,
    height: 500,
  });

  // 使用 facetRect 进行分面
  chart.facet('grid', {
    columns: 2, // 创建两列
    padding: 30,
    // 分别为每种类型的图设置配置
    config: (idx) => ({
      scales: {
        year: { nice: true },
        value: { min: 0 },
      },
      axes: {
        year: { position: idx === 0 ? 'bottom' : null },
        value: { position: idx === 0 ? 'left' : 'right' },
      },
      guides: () => {
        return idx === 1 ? [] : [Axis.line()];
      }, // 只在第一个仪表盘显示 x 轴线
      interactions: idx === 1 ? [] : ['active-region'], // 只在第一个仪表盘启用交互
      geometries: [
        {
          type: idx === 0 ? 'interval' : 'line', // 在第一列使用柱状图，在第二列使用折线图
          position: 'year*value',
          color: 'type',
        },
      ],
    }),
  });

  chart.data(data);

  chart.render();
}

createDashboard(data);

    这个代码会在一个容器中创建两个仪表盘。每个仪表盘都有其独立的 x 轴标签（年份），并且在第一个仪表盘上展示了柱状图（按类型分色），第二个仪表盘则展示了折线图。如果你想要添加更多的仪表盘，只需要增加 columns 的值，并根据需要调整配置。

    将这段代码放在 HTML 文件中，确保引入了 AntV G2 的 CSS 和 JS 文件，例如：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AntV G2 Dashboard</title>
  <link rel="stylesheet" href="https://unpkg.com/@antv/g2/dist/g2.min.css" />
</head>
<body>
  <div id="container"></div>
  <script src="https://unpkg.com/@antv/g2/dist/g2.min.js"></script>
  <script src="yourScript.js"></script>
</body>
</html>

    将上面的 JavaScript 代码保存到 yourScript.js 文件中，然后打开 HTML 文件，你应该能看到两个仪表盘的图表。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 4月24日

悬赏问题

  • ¥15 Kylin-Desktop-V10-GFB-Release-JICAI_02- 2207-Build14-ARM64.iso有没有这个版本的系统啊
  • ¥15 能不能通过蓝牙将传感器数据传送到手机上
  • ¥20 100元python和数据科学实验项目
  • ¥15 根据时间在调用出列表
  • ¥15 FastReport.community 编辑，table只显示“每页”最顶部和底部横线
  • ¥15 R 包chipseeker 安装失败
  • ¥15 Veeam Backup & Replication 9.5 还原问题
  • ¥15 vue-print-nb
  • ¥15 winfrom的datagridview下拉框变成了黑色，渲染不成功
  • ¥20 利用ntfy实现短信推送