antv/g2 如何利用facetRect分面做多个仪表盘,目前试了下,只有柱状图折线图能实现
7条回答 默认 最新
关注 引自免费微信小程序:皆我百晓生
在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 文件,你应该能看到两个仪表盘的图表。解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥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实现短信推送