Nutty Peanut Marshmallow

    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

    2

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    16.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • showjoy