@antv/f2n 可滑动的折线图

实现效果如下

html

<canvas id="canvas-chart" class="canvas-chart" ref="chart" width="100%"></canvas>

引入组件

import F2 from '@antv/f2/lib/index'
// require('@antv/f2/lib/interaction/')
require('@antv/f2/lib/interaction/pan') // 引入图表平移交互
// 第一步：加载插件 ScrollBar
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar')
// 第二步：注册插件 ScrollBar
F2.Chart.plugins.register(ScrollBar) // 这里进行全局注册，也可以给 chart 的实例注册
let chart = null

折线图demo

fetch('https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json')
        .then(res => res.json())
        .then(data => {
    
    
          chart = new F2.Chart({
    
    
            id: 'canvas-chart',
            pixelRatio: window.devicePixelRatio,
            plugins: ScrollBar
          })
          chart.source(data, {
    
    
            release: {
    
    
              min: 1980,
              max: 2010
            }
          })
          chart.tooltip({
    
    
            showCrosshairs: true,
            showItemMarker: false,
            background: {
    
    
              radius: 2,
              fill: '#1890FF',
              padding: [ 3, 5 ]
            },
            nameStyle: {
    
    
              fill: '#fff'
            },
            onShow: function onShow (ev) {
    
    
              const items = ev.items
              items[0].name = items[0].title
            }
          })
          chart.line().position('release*count')
          chart.point().position('release*count').style({
    
    
            lineWidth: 1,
            stroke: '#fff'
          })

          chart.interaction('pan')
          chart.scrollBar({
    
           
            mode: 'x',        
            xStyle: {
    
               
              backgroundColor: '#e8e8e8',            
              fillerColor: '#808080',            
              offsetY: -2        
            }      
          }) // 按照x轴滑动      
          chart.render()