Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including f2shim with all npm packages installed. Try it out:

var f2shim = require("f2shim")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

f2shim v1.0.0

一个提供legend自适应,tooltip脱离canvas的[F2](https://github.com/antvis/f2)插件

f2shim

一个提供legend高度自适应,tooltip脱离canvas的F2插件

安装

npm install --save f2shim

使用说明

  1. 创建一个只包含canvas元素的div(如果使用到插件的tooltip需要这么做):
     <div>
       <canvas style="width: 100%" id="demo"></canvas>
     </div>
    
  2. 使用
     import f2shim from 'f2shim';
     const chart = new F2.Chart({
       id: 'demo',
       height: 300,
       pixelRatio: window.devicePixelRatio,
       plugins: f2shim, // 引入插件
     });
    

配置

  1. 插件tooltip只有在custom为true下有效,如果自定义tooltip又不需要使用插件的,需要如下配置:
      chart.tooltip({
        custom: true,
        onChange() {
          // do something
          return false;
        },
        onHide() {
          // do something
          return false;
        }
      })
    
  2. tooltip的方向配置,内部采用popper.js, 其配置都支持, 如设置tooltip溢出的范围元素:
     chart.tooltip({
       modifiers: {
         preventOverflow: {
           boundariesElement: document.querySelector('#demo').parentElement,
         },
       },
     })
    
  3. 关掉legend高度自适应,配置autoSize为false:
    const chart = new F2.Chart({
       id: 'demo',
       height: 300,
       autoSize: false,
       pixelRatio: window.devicePixelRatio,
       plugins: f2shim, // 引入插件
     });
    

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free