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