F2
F2 copied to clipboard
antvis
TextGuide和ScrollBar连用会出现视觉bug，未展示的值会在y轴旁出现
/** @jsx jsx */ import { jsx, Canvas, Chart, Line, Point, Axis, Tooltip, TextGuide, ScrollBar, } from "@antv/f2";
const data = [ { date: "2024-04-10 12:00", weight: 12, }, { date: "2024-04-10 13:00", weight: 13, }, { date: "2024-04-10 14:00", weight: 19, }, { date: "2024-04-10 15:00", weight: 12, }, { date: "2024-04-10 16:00", weight: 17, }, { date: "2024-04-10 17:00", weight: 512, }, { date: "2024-04-10 18:00", weight: 212, }, { date: "2024-04-10 19:00", weight: 112, }, { date: "2024-04-10 20:00", weight: 812, }, { date: "2024-04-10 21:00", weight: 122, }, { date: "2024-04-10 22:00", weight: 125, }, { date: "2024-04-10 23:00", weight: 12, }, { date: "2024-04-11 00:00", weight: 12, }, { date: "2024-04-11 01:00", weight: 12, }, { date: "2024-04-11 02:00", weight: 12, }, { date: "2024-04-11 03:00", weight: 12, }, { date: "2024-04-11 04:00", weight: 12, }, { date: "2024-04-11 05:00", weight: 12, }, { date: "2024-04-11 06:00", weight: 12, }, { date: "2024-04-11 07:00", weight: 120, }, { date: "2024-04-11 08:00", weight: 12, }, { date: "2024-04-11 09:00", weight: 12, }, { date: "2024-04-11 10:00", weight: 12, }, { date: "2024-04-11 11:00", weight: 912, }, { date: "2024-04-11 12:00", weight: 12, }, ];
const context = document.getElementById("container").getContext("2d");
const LineChart = (
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
<Chart data={data}>
<Axis field="date" tickCount={10} />
<Axis field="weight" />
<Line x="date" y="weight" color="#ff4d4f" />
<Point x="date" y="weight" color="#cf1322" />
<ScrollBar mode="x" range={[0.1, 0.6]} />
<Tooltip showCrosshairs />
{data.map((item) => {
const { weight } = item;
return (
<TextGuide
records={[item]}
content={${weight}}
offsetY={-10}
offsetX={-5}
/>
);
})}
</Chart>
</Canvas>
);
const chart = new Canvas(LineChart.props);
chart.render();
