android 横滚的折线图_AntV F2 数据可视化填坑，图表横向滚动

柱状图横向滚动

思路

通过 Interaction 实现平移，通过 ScrollBar 显示滚动条

1.Interaction

F2 提供一套交互机制，以达到通用交互行为的封装和复用。基于此机制，我们提供了以下五种通用的交互行为：

饼图选中

柱状图选中

图表平移 pan

图表缩放

图表 swipe 快扫

2.ScrollBar

Scroll bar 是一个静态插件，主要用于辅助 pan 和 pinch 交互。 滚动条只是为 pan 服务的。

数据结构

数据结构：

[

{

provinceShortName: "北京",

index: 0,

confirmedCount: 168

},

//...

]

引入 F2

import F2 from "@antv/f2/lib/index";

不成功

下面是不成功的例子，如果你不是吃瓜群众，可以直接通过文章目录跳转到 成功

为什么要放出来，因为我搞得是柱状图，看官方文档柱状图的例子搞的没搞出来。

可以横向滚动了，但是当横坐标只显示刚开始定义的 originProvinces, 想着动态改变 originProvinces，鼓捣半天发现不知道在什么地方触发。如果您知道原因，欢迎指教！

// 通过横坐标定义初始显示的数据，剩余的数据通过滑动显示(好像是不对的)

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();

成功

官方还给了另一个个横向滚动的 例子，不过是折线图的，只能硬着头皮上了，仿照官方折线图滚动的例子改成如下：

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();

大功告成了，这里只放了关键代码，其他细节再优化。 仅仅实现图表滚动，是不是稍微有点麻烦 ？