radar-canvas
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    radar-canvas

    原生canvas渲染的雷达图,具有基本的功能配置

    目录

    安装

    npm:

     npm install radar-canvas

    CDN:

    <script src="./../dist/index.js"></script>

    示例

    克隆这个仓库,用浏览器打开 example 目录下 index.html 文件查看效果

    const cw = 500;
    const ch = 500;
    const radius = 200;
    const canvas_node = document.getElementById("radar");
    canvas_node.width = cw;
    canvas_node.height = ch;
    
    const ctx = canvas_node.getContext("2d");
    
    const radar = new Radar({
      ctx,
      /**
       * 雷达图半径
       **/
      radius,
      /**
       * 指示器轴的分割段数
       **/
      splitNumber: 4,
      /**
       * 雷达图的指示器,用来指定雷达图中的多个变量(维度)
       **/
      indicator: [
        { text: "语文", max: 150 },
        { text: "数学", max: 150 },
        { text: "英语", max: 150 },
        { text: "物理", max: 100 },
        { text: "化学", max: 100 },
        { text: "生物", max: 100 },
      ],
      /**
       * 雷达图的数据
       **/
      data: {
        /**
         * 其中的value项数组是具体的数据,每个值跟 indicator 一一对应。
         **/
        value: [100, 110, 150, 80, 80, 30],
        /**
         * 数据区域填充的颜色
         **/
        fill: [
          [0, "rgba(120, 208, 248, 0.1)"],
          [1, "rgba(120, 208, 248, 0.9)"],
        ],
        /**
         *  sharp 锐角 sharp 平滑的
         **/
        type: "smooth",
        // type: "sharp",
        /**
         * 绘制点
         **/
        symbol: {
          show: false,
          pointStyle: {
            size: 6,
            color: "#0182ff",
          },
        },
        /**
         * 控制bezier控制点的偏移,控制这个值可以控制圆角,只有在 type 为smooth时生效
         **/
        bezierOffset: 20,
        /**
         * 绘制边线
         **/
        line: {
          show: false,
          lineStyle: {
            color: "#56a3f1",
          },
        },
      },
      /**
       * 指示器轴的分割线的类型,polygon 多边形、circle 圆形
       **/
      shape: "circle",
      /**
       * 雷达图在canvas上渲染的坐标
       **/
      x: 50,
      y: 50,
      /**
       * 坐标系起始角度,也就是第一个指示器轴的角度。
       **/
      startAngle: 90,
      /**
       * 指示器轴线
       **/
      axisLine: {
        lineStyle: {
          color: "#78D0F8",
        },
      },
      /**
       * 指示器轴的分割线
       **/
      splitLine: {
        lineStyle: {
          color: "#78D0F8",
        },
      },
    });
    
    radar.render();

    配置参数

    具体查看 index.d.ts 文件

    License

    MIT

    Install

    npm i radar-canvas

    DownloadsWeekly Downloads

    0

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    51.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • cct124