假想国

实现鼠标和触屏拖拽g2柱状图翻页显示数据的功能 背景 在做看板项目时，视觉想要实现如下的柱状图效果 需要做到几个交互点： 一页只显示部分内容，支持翻页查看其它数据。 右侧需要有个蒙层（或者按钮）提示用户还可以翻页，翻到底部或者数据只有一页时不显示遮罩。 翻页的动作由鼠标拖拽或手指触摸触发。 为了实现上述功能点，我们需要 g2 提供或自己手动实现以下相应的需求： 能够分页展示数据 能够监听鼠标和手指拖拽事件，控制页数变化，然后触发图表绘制当前页。 能够获取到当前页码和总页数，判断是否显示遮罩和是否已翻

柱形图（基于 4.x 版本 g2） 简介 g2 文档较为简略，实现具体功能时花费了较多的时间，所以写一份相关的记录，记录一些常见的功能配置和 hack 配置 一、表配置-ChartConfig const chart = new Chart(props: ChartCfg); 手册 详细参数见官方文档，这里只举例说明可以配置滚动条的样式。 常规属性 宽度：chartConfig.width 高度：chartConfig.height 容器：chartConfig.container 自定义滚动条样式 通过