AntV F2 数据可视化填坑，图表横向滚动
思路
通过 Interaction 实现平移，通过 ScrollBar 显示滚动条
1.Interaction
F2 提供一套交互机制，以达到通用交互行为的封装和复用。基于此机制，我们提供了以下五种通用的交互行为：
- 饼图选中
- 柱状图选中
- 图表平移 pan
- 图表缩放
- 图表 swipe 快扫
2.ScrollBar
Scroll bar 是一个静态插件，主要用于辅助 pan 和 pinch 交互。 滚动条只是为 pan 服务的。
数据结构
数据结构：
[
{
provinceShortName: "北京",
index: 0,
confirmedCount: 168
},
//...
]引入 F2
使用 ScrollBar 文档中这样写：
const F2 = require('@antv/f2/lib/index');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
// 注册插件 ScrollBar
F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册，也可以给 chart 的实例注册
// 或者给具体的 chart 实例注册
const chart = new F2.Chart({
id: 'canvas',
plugins: ScrollBar,
});使用 pan 文档中这样写：
const F2 = require('@antv/f2/lib/index'); // 引入 F2
require('@antv/f2/lib/interaction/pan'); // 引入图表平移交互
// ... 创建 chart 实例
// 调用，需要在 chart.render() 方法之前调用
chart.interaction('pan');在 vue-cli 中实测并不需要, 只需要在组件中引入 index 即可，
import F2 from "@antv/f2/lib/index";这里引入 index 就够了，官方文档所说的还需要引入 scroll bar 和 pan。
如果 pan 需要在使用 vue-cli 时引入的话肯定像这样 import pan from "@antv/f2/lib/interaction/pan"，
那么如何使用 pan 这个变量 ？
不成功
- 下面是不成功的例子，如果你不是吃瓜群众，可以直接通过文章目录跳转到 成功
- 为什么要放出来，因为我搞得是柱状图，看官方文档柱状图的 例子 搞的没搞出来。
const originProvinces = ["浙江","广东","*","江苏","内蒙古","云南"];
const chart = new F2.Chart({
id: "province-trend",
// plugins: [ScrollBar], 通过 import 引入不需要在这里注册了
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
provinceShortName: {
type: "cat", // 数值类型
tickCount: 5,
values: originProvinces // 对应上面
},
confirmedCount: {
tickCount: 5
}
});
chart
.interval()
.position("provinceShortName*confirmedCount")
.color("provinceShortName");
chart.tooltip({
showItemMarker: true,
background: {
radius: 2,
padding: [3, 5]
},
onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
items[0].value = items[0].value + " 人";
}
});
chart.interaction("pan");
chart.scrollBar({
xStyle: {
backgroundColor: "#e8e8e8",
fillerColor: "#808080",
offsetY: -2
}
});
chart.render();- 头部定义
originProvinces通过横坐标定义初始显示的数据，剩余的数据通过滑动显示。 - 可以横向滚动了，但是当横坐标只显示刚开始定义的
originProvinces, 想着动态改变originProvinces，鼓捣半天发现不知道在什么地方触发。如果您知道原因，欢迎指教！
成功
官方还给了另一个个横向滚动的 例子，不过是折线图的，只能硬着头皮上了，仿照官方折线图滚动的例子改成如下：
const chart = new F2.Chart({
id: "province-trend",
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
index: { // 这里横坐标使用 index，
min: 0, // 设置刚开始显示的区间 0-5
max: 5
}
});
chart.tooltip({
showCrosshairs: false,
showItemMarker: false,
background: {
radius: 2,
fill: "#1890FF",
padding: [3, 5]
},
nameStyle: {
fill: "#fff"
},
onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
}
});
// 这里横坐标应该显示的是 provinceShortName,
// 但是用这种方法必须使用 index 了
// 后面在将横坐标使用类似于起别名的方式改成 provinceShortName
chart.interval().position("index*confirmedCount");
chart
.point()
.position("index*confirmedCount")
.style({
lineWidth: 1,
stroke: "#fff"
});
chart.axis("index", {
label(text) {
return {
fontSize: 14,
// 在这里将横坐标显示为 provinceShortName
text: data[text].provinceShortName
};
}
});
chart.interaction("pan");
chart.scrollBar({
mode: "x",
xStyle: {
offsetY: -5
}
});
chart.render();这种实现的思路就是不去单独定义刚开始显示的横坐标，而是替换为 index （索引），给它定义一个最初显示的区间。相应的横坐标必须使用 index 了，
但是 index 并不是我们想要显示的横坐标，我们转换思路，在给它使用类似取别名的方式转换过来就可以了。
大功告成了，这里只放了关键代码，其他细节再优化。 仅仅实现图表滚动，是不是稍微有点麻烦 ？