AntV F2

[WangShuXian6]

AntV F2

https://f2.antv.antgroup.com/ https://github.com/antvis/f2/stargazers/

F2·移动端可视化引擎 F2 是一个专注于移动端，面向常规统计图表，开箱即用的可视化引擎，完美支持 H5 环境同时兼容多种环境（Node, 小程序），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。 开始使用

[WangShuXian6]

ScrollBar 组件

autoFit

设为false,可以固定横坐标和竖坐标的值，防止坐标值随数据自由变动

https://f2.antv.antgroup.com/examples/line/line/#pan autoFit =true 时，垂直坐标轴的值可能在活动变动

75变动为84

覆盖代码即可

/** @jsx jsx */
import { jsx, Canvas, Chart, Line, Point, Axis, ScrollBar,LineGuide,Tooltip } from '@antv/f2';

const context = document.getElementById('container').getContext('2d');

const data = [ {date: 1655078400000, day: "06-13", value: 113.5, type: "high", displayType: "收缩压"}, {date: 1655078400000, day: "06-13", value: 81, type: "low", displayType: "舒张压"}, {date: 1655164800000, day: "06-14", value: 116, type: "high", displayType: "收缩压"}, {date: 1655164800000, day: "06-14", value: 78.5, type: "low", displayType: "舒张压"}, {date: 1655251200000, day: "06-15", value: 106, type: "high", displayType: "收缩压"}, {date: 1655251200000, day: "06-15", value: 72, type: "low", displayType: "舒张压"}, {date: 1655337600000, day: "06-16", value: 113.5, type: "high", displayType: "收缩压"}, {date: 1655337600000, day: "06-16", value: 76.5, type: "low", displayType: "舒张压"}, {date: 1655424000000, day: "06-17", value: 118.5, type: "high", displayType: "收缩压"}, {date: 1655424000000, day: "06-17", value: 79.5, type: "low", displayType: "舒张压"}, {date: 1655510400000, day: "06-18", value: 112, type: "high", displayType: "收缩压"}, {date: 1655510400000, day: "06-18", value: 72, type: "low", displayType: "舒张压"}, {date: 1655596800000, day: "06-19", value: 116.5, type: "high", displayType: "收缩压"}, {date: 1655596800000, day: "06-19", value: 79, type: "low", displayType: "舒张压"}, {date: 1655683200000, day: "06-20", value: 103, type: "high", displayType: "收缩压"}, {date: 1655683200000, day: "06-20", value: 72, type: "low", displayType: "舒张压"}, {date: 1655769600000, day: "06-21", value: 105, type: "high", displayType: "收缩压"}, {date: 1655769600000, day: "06-21", value: 73.5, type: "low", displayType: "舒张压"}, {date: 1655856000000, day: "06-22", value: 102.5, type: "high", displayType: "收缩压"}, {date: 1655856000000, day: "06-22", value: 70.5, type: "low", displayType: "舒张压"}, {date: 1655942400000, day: "06-23", value: 109, type: "high", displayType: "收缩压"}, {date: 1655942400000, day: "06-23", value: 73.5, type: "low", displayType: "舒张压"}, {date: 1656028800000, day: "06-24", value: 109.5, type: "high", displayType: "收缩压"}, {date: 1656028800000, day: "06-24", value: 74.5, type: "low", displayType: "舒张压"}, {date: 1656115200000, day: "06-25", value: 119, type: "high", displayType: "收缩压"}, {date: 1656115200000, day: "06-25", value: 82.5, type: "low", displayType: "舒张压"}, {date: 1656201600000, day: "06-26", value: 118, type: "high", displayType: "收缩压"}, {date: 1656201600000, day: "06-26", value: 81, type: "low", displayType: "舒张压"}, {date: 1656288000000, day: "06-27", value: 110.5, type: "high", displayType: "收缩压"}, {date: 1656288000000, day: "06-27", value: 76.5, type: "low", displayType: "舒张压"}, {date: 1656374400000, day: "06-28", value: 119.5, type: "high", displayType: "收缩压"}, {date: 1656374400000, day: "06-28", value: 77, type: "low", displayType: "舒张压"}, {date: 1656460800000, day: "06-29", value: 111, type: "high", displayType: "收缩压"}, {date: 1656460800000, day: "06-29", value: 75, type: "low", displayType: "舒张压"}, {date: 1656547200000, day: "06-30", value: 105, type: "high", displayType: "收缩压"}, {date: 1656547200000, day: "06-30", value: 75, type: "low", displayType: "舒张压"}, {date: 1656633600000, day: "07-01", value: 111.5, type: "high", displayType: "收缩压"}, {date: 1656633600000, day: "07-01", value: 84.5, type: "low", displayType: "舒张压"}, {date: 1656720000000, day: "07-02", value: 115.5, type: "high", displayType: "收缩压"}, {date: 1656720000000, day: "07-02", value: 82.5, type: "low", displayType: "舒张压"}, {date: 1656806400000, day: "07-03", value: 106, type: "high", displayType: "收缩压"}, {date: 1656806400000, day: "07-03", value: 75.5, type: "low", displayType: "舒张压"}, {date: 1656892800000, day: "07-04", value: 108, type: "high", displayType: "收缩压"}, {date: 1656892800000, day: "07-04", value: 72.5, type: "low", displayType: "舒张压"}, {date: 1656979200000, day: "07-05", value: 108, type: "high", displayType: "收缩压"}, {date: 1656979200000, day: "07-05", value: 76, type: "low", displayType: "舒张压"}, {date: 1657065600000, day: "07-06", value: 106.5, type: "high", displayType: "收缩压"}, {date: 1657065600000, day: "07-06", value: 72, type: "low", displayType: "舒张压"}, {date: 1657152000000, day: "07-07", value: 107.5, type: "high", displayType: "收缩压"}, {date: 1657152000000, day: "07-07", value: 75.5, type: "low", displayType: "舒张压"}, {date: 1657238400000, day: "07-08", value: 110, type: "high", displayType: "收缩压"}, {date: 1657238400000, day: "07-08", value: 71.5, type: "low", displayType: "舒张压"}, {date: 1657324800000, day: "07-09", value: 109.5, type: "high", displayType: "收缩压"}, {date: 1657324800000, day: "07-09", value: 78, type: "low", displayType: "舒张压"}, {date: 1657411200000, day: "07-10", value: 112, type: "high", displayType: "收缩压"}, {date: 1657411200000, day: "07-10", value: 80, type: "low", displayType: "舒张压"}, {date: 1657497600000, day: "07-11", value: 111.5, type: "high", displayType: "收缩压"}, {date: 1657497600000, day: "07-11", value: 73, type: "low", displayType: "舒张压"}, {date: 1657584000000, day: "07-12", value: 111, type: "high", displayType: "收缩压"}, {date: 1657584000000, day: "07-12", value: 78, type: "low", displayType: "舒张压"}, {date: 1657670400000, day: "07-13", value: 109.5, type: "high", displayType: "收缩压"}, {date: 1657670400000, day: "07-13", value: 74, type: "low", displayType: "舒张压"}, {date: 1657756800000, day: "07-14", value: 107, type: "high", displayType: "收缩压"}, {date: 1657756800000, day: "07-14", value: 76.5, type: "low", displayType: "舒张压"}, {date: 1657843200000, day: "07-15", value: 112, type: "high", displayType: "收缩压"}, {date: 1657843200000, day: "07-15", value: 76.5, type: "low", displayType: "舒张压"}, {date: 1657929600000, day: "07-16", value: 107, type: "high", displayType: "收缩压"}, {date: 1657929600000, day: "07-16", value: 71, type: "low", displayType: "舒张压"}, {date: 1658016000000, day: "07-17", value: 112, type: "high", displayType: "收缩压"}, {date: 1658016000000, day: "07-17", value: 77, type: "low", displayType: "舒张压"}, {date: 1658102400000, day: "07-18", value: 109.5, type: "high", displayType: "收缩压"}, {date: 1658102400000, day: "07-18", value: 80, type: "low", displayType: "舒张压"}, {date: 1658275200000, day: "07-20", value: 114.5, type: "high", displayType: "收缩压"}, {date: 1658275200000, day: "07-20", value: 72, type: "low", displayType: "舒张压"}, {date: 1658361600000, day: "07-21", value: 104, type: "high", displayType: "收缩压"}, {date: 1658361600000, day: "07-21", value: 68, type: "low", displayType: "舒张压"}, {date: 1658448000000, day: "07-22", value: 108, type: "high", displayType: "收缩压"}, {date: 1658448000000, day: "07-22", value: 71, type: "low", displayType: "舒张压"}, {date: 1658534400000, day: "07-23", value: 112, type: "high", displayType: "收缩压"}, {date: 1658534400000, day: "07-23", value: 74, type: "low", displayType: "舒张压"}, {date: 1658620800000, day: "07-24", value: 111, type: "high", displayType: "收缩压"}, {date: 1658620800000, day: "07-24", value: 77, type: "low", displayType: "舒张压"}, {date: 1658707200000, day: "07-25", value: 116, type: "high", displayType: "收缩压"}, {date: 1658707200000, day: "07-25", value: 81, type: "low", displayType: "舒张压"}, {date: 1658793600000, day: "07-26", value: 116, type: "high", displayType: "收缩压"}, {date: 1658793600000, day: "07-26", value: 82, type: "low", displayType: "舒张压"}, {date: 1658880000000, day: "07-27", value: 116, type: "high", displayType: "收缩压"}, {date: 1658880000000, day: "07-27", value: 79, type: "low", displayType: "舒张压"}, {date: 1658966400000, day: "07-28", value: 107, type: "high", displayType: "收缩压"}, {date: 1658966400000, day: "07-28", value: 71, type: "low", displayType: "舒张压"}, {date: 1659052800000, day: "07-29", value: 112, type: "high", displayType: "收缩压"}, {date: 1659052800000, day: "07-29", value: 78, type: "low", displayType: "舒张压"}, {date: 1659139200000, day: "07-30", value: 113, type: "high", displayType: "收缩压"}, {date: 1659139200000, day: "07-30", value: 73, type: "low", displayType: "舒张压"}, {date: 1659225600000, day: "07-31", value: 119, type: "high", displayType: "收缩压"}, {date: 1659225600000, day: "07-31", value: 82, type: "low", displayType: "舒张压"}, {date: 1659312000000, day: "08-01", value: 111, type: "high", displayType: "收缩压"}, {date: 1659312000000, day: "08-01", value: 79, type: "low", displayType: "舒张压"}, {date: 1659398400000, day: "08-02", value: 113, type: "high", displayType: "收缩压"}, {date: 1659398400000, day: "08-02", value: 80, type: "low", displayType: "舒张压"} ];

const { props } = (

);

const chart = new Canvas(props); chart.render();

[WangShuXian6]

综合

数据空值用 null 或 undefined表示

有空值

https://f2.antv.antgroup.com/examples/line/line/#pan 1974 年的数据被忽略

/** @jsx jsx */
import { jsx, Canvas, Chart, Line, Point, Axis, ScrollBar } from '@antv/f2';

const context = document.getElementById('container').getContext('2d');

const data1=[ { "title": "Bohemian Rhapsody", "artist": "Queen", "release": 1974, "year": "1999", "rank": "1", "count": null }, { "title": "Bohemian Rhapsody", "artist": "Queen", "release": 1975, "year": "1999", "rank": "1", "count": 978 }, { "title": "Hotel California", "artist": "Eagles", "release": 1977, "year": "1999", "rank": "2", "count": 1284 }, { "title": "Child In Time", "artist": "Deep Purple", "release": 1972, "year": "1999", "rank": "3", "count": 1117 } ]

fetch('https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json') .then((res) => res.json()) .then((data) => { const { props } = (

);

const chart = new Canvas(props);
chart.render();

});

## 更新 ScrollBar 组件 range 后 数据不同步
需要为容器添加属性 `key={`${JSON.stringify(list.length)}-${JSON.stringify(range)}`}`使图表强制销毁重新绘制