Need private packages and team management tools?Check out npm Teams »

f2shim

1.0.0 • Public • Published

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, // 引入插件
     });

Install

npm i f2shim

DownloadsWeekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

16.6 kB

Total Files

7

Last publish

Collaborators

  • avatar