bizcharts 分面图

我是用bizchart

我想实现这个效果
bizcharts 分面图

注意看Y轴

bizcharts 分面图

相同距离下的值不一样，我希望y轴下方的刻度间居也是一个 200，然后占更大的地方，该怎么处理 怎么处理

源码

import React from "react";
import {
Chart,
Line,
Point,
Tooltip,
Axis,
Interaction,
Legend,
Interval,
Annotation,
Facet,
} from "bizcharts";
import DataSet from "@antv/data-set";
export default function FlowBar() {
const tmp = [];
const dates = [];
const ds = new DataSet();
const dv = ds
.createView()
.source(tmp)
.transform({
type: "filter",
callback(row) {
// 判断某一行是否保留，默认返回true
return (
new Date(row.date * 1000).getFullYear() ===
new Date(dates[0] * 1000).getFullYear()
);
},
});
const dataT = [
{
direction: "up",
data: 200,
type: "ipv4",
},
{
direction: "down",
data: 300,
type: "ipv4",
},
{
direction: "up",
data: 500,
type: "ipv6",
},
{
direction: "down",
data: 2500,
type: "ipv6",
},
];
const scale = {
type: {
sync: true,
tickCount: 11,
},
data: {
range: [0, 0.8],
// formatter(v) {
//   return `${v}%`;
// },
},
direction: {
sync: true,
},
};
return (
<Chart height={600} data={dataT} scale={scale} autoFit padding={50}>
<Tooltip />
<Facet
type="mirror"
fields={["direction"]}
// showTitle={false}
// transpose
padding={0}
eachView={(view, facet) => {
console.log(view, facet);
view
.interval()
.position("type*data")
.color("type", (type) => {
if (type === "ipv4") {
return "red"
}
})
.label("data", { textAlign: "end" });
}}
/>
</Chart>
);
}

解决思路应该是 同个Chart用的应该是一个刻度尺
我在文档 Scale 度量 里找到了一个log类型，大概可以实现

bizcharts 分面图

// 新增type和base属性
const scale = {
data: {
type: 'log',
base: 200,
},
};

不过我觉得不太完美 你可以再去文档里看一下

回答

以上是 bizcharts 分面图 的全部内容， 来源链接： utcz.com/a/112408.html

回到顶部