Ant-design的 Chart 分面使用
主要是通过 facet()
方式来实现, 第一个参数是采取什么样的分面类型
我们这里用 rect
, 这种模式下我们需要提供两个维度,组成一个矩阵
笔记中使用的数据如下
[{"periodDesc": "第一季度", "calculationResult": 0.07, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第一季度", "calculationResult": 0.07, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第一季度", "calculationResult": 0.19, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}
,{"periodDesc": "第一季度", "calculationResult": 0.19, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第一季度", "calculationResult": null, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第一季度", "calculationResult": null, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.13, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第二季度", "calculationResult": 0.13, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.13, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.13, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.03, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第三季度", "calculationResult": 0.03, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第三季度", "calculationResult": 0.16, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.16, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.03, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.03, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.15, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第四季度", "calculationResult": 0.15, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第四季度", "calculationResult": 0.24, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.24, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}]
出这张图
我们使用 税号横向展开, 不同的数据表单类型纵向展开
对应的维度通过 fields
参数来配置.
比如使用 fields: ['taxpayerNumber', 'chartType'],
来配置, 结果就如上图所示, 按照这两个维度组成一个矩阵
源代码如下:
// 这个data 就是上面的数据.这里为了代码简洁不做声明
const data = {};
// 创建一个 newChart, container制定的是一个组件的 ID,
// 这个chart将会渲染到制定组件下面. 例如 <div id="chartDiv"></div>
const newChart = new Chart({
container: 'chartDiv',
forceFit: true,
height: 300,
padding: [80, 80, 80, 80], // 图上的边距
});
// 引入data
newChart.source(data);
// 设置列别名
newChart.scale('calculationResult', {
alias: '指标计算结果',
});
// 制定标题的位置
newChart.axis('calculationResult', {
title: {
offset: 50
}
});
// 创建分面
newChart.facet('rect', {
fields: ['taxpayerNumber', 'chartType'],
eachView(view, facet) {
// 使用柱状图
view.interval()
.position('periodDesc*calculationResult')
.color('periodDesc')
.label('calculationResult', {
useHtml: true,
offset: 5, // 文本距离图形的距离
htmlTemplate: (text, item) => {
const a = item.point;
return '<spin>' + a.calculationResult + '</spin>';
}
});
}
});
// 渲染分片
newChart.render();
其中是实现主要是 eachView(view, facet)
实现的. facet 存储了这个分面的信息, 如果不同分面使用不同的图.
示例:
newChart.facet('rect', {
fields: ['taxpayerNumber', 'chartType'],
eachView(view, facet) {
if (facet.rowValue === "同比变动率" || facet.rowValue === "环比变动率") {
// 使用.line() 画折线图
view.line()
.position('periodDesc*calculationResult')
.label('calculationResult', {
useHtml: true,
offset: 5, // 文本距离图形的距离
htmlTemplate: (text, item) => {
const a = item.point;
return '<spin>' + a.calculationResult + '</spin>';
}
});
} else {
view.interval()
.position('periodDesc*calculationResult')
.color('periodDesc')
.label('calculationResult', {
useHtml: true,
offset: 5, // 文本距离图形的距离
htmlTemplate: (text, item) => {
const a = item.point;
return '<spin>' + a.calculationResult + '</spin>';
}
});
}
}
});
这里使用 facet.rowValue
来判断你要展示什么样的图, 这个是之前 fields
里面定义的第二个维度的值.
结果如下:
当行上面的维度是 同比变动率
的时候, 图就成了折线图.
更多具体信息可以参考官网:
3.x 版本, https://g2-v3.antv.vision/zh/docs/manual/tutorial/facet
4.x版本, https://g2.antv.vision/zh/docs/manual/tutorial/facet