关于javascript:记录一次利用canvans解决数据可视化问题箱图转换为对应圆

先看最终效果图

需要：箱图种每个箱子都有本人对应的圆心和半径，以及以后图上对应的y轴的取值范畴（可缩放），依据这三个值，画出一个圆心在同一条竖线上一一对应的圆

形象的画一下：
，
再给它想方法搬到规范直角坐标系上

能够看到，所有的圆的圆心坐标都是（0，？），而此时的直角坐标系的y的最大值和最小值，咱们能够任意给，且是对称的，咱们给到600.-600，此时咱们只须要算进去实在的每个圆在右侧的坐标系里的圆心坐标，和半径长度，就能够利用canvas来画出圆。

难点在于坐标的转换，这里我是利用比例的关系进行的计算：
1、首先是对于半径的计算，列出公式：

实在圆的半径 / 实在的范畴 = 坐标系圆的半径 / 坐标系y轴的范畴

实在圆的半径由后端发回，
实在的范畴由左侧的箱图的y轴范畴也能够拿到 = y_end – y_start
坐标系y轴的范畴 = 1200，（咱们设置的y轴范畴为600到-600）
即可计算出坐标系上缩放后的圆的半径

2、坐标系上圆心的计算，同样，咱们能够利用圆心距竖直核心的间隔，来列出等比例的公式：

（实在圆心坐标 – 实在范畴核心）/ 实在的范畴 = （坐标系圆心y坐标 – 坐标系范畴核心y坐标）/坐标系y轴的范畴

实在圆的半径由后端发回，
实在的范畴 = y_end – y_start
实在范畴核心 = (y_end – y_start)/2 + y_start
坐标系范畴核心y坐标 = 0
坐标系y轴的范畴 = 1200

即可失去坐标系上缩放后 圆心y的坐标

晓得这两个，咱们只须要在canvans上把圆画进去即可，咱们建设一个大小为1200的canvans画布，
pencil?.clearRect(0, 0, 1200, 1200);
而canvans自带的坐标系为这样子的

所以咱们的坐标系的原点对应的canvans画布的坐标为（600，600）

那圆心的坐标还是须要转化，
，
能够看到，原先圆心的y坐标为200，新的即为600-200=400，即
canvans画布上 圆心的y坐标 = 600 – 缩放后缩放后 圆心y的坐标
那么就能够利用canvas画圆的办法来把圆绘制进去

pencil.arc(600,canvans画布上圆心的y坐标，缩放后圆的半径，0,2 * Math.PI,);

所有的数学逻辑剖析与canvans的办法剖析结束。

间接上代码:

type BoxPlotCircleData = {
  diameter: number;
  mean: number;
  parameterX: string;
  testItem: string;
};

type CirCleProps = {
  // colors: Color[];
  range: [number, number];
  boxPlotColorDic: { [key: string]: Color };
  width: number;
  data: BoxPlotCircleData[];
};

// 计算缩放后直径值的函数,应用之前保障realRange为大于0 的数
const computerDiameter = (realDiameter: number, realRange: number, computerRange: number) => {
  // 公式：computerDiameter/realDiameter = computerRange/realRange
  // if (!realRange) return;
  const computerDiameterRes: number = bignumberFc.multiply(bignumberFc.divide(computerRange, realRange), realDiameter);
  return computerDiameterRes;
};

// 计算缩放后圆心Y坐标的函数，应用之前保障realRange为大于0 的数
const computerCircleCenter = (
  realCircleCenter: number,
  realRange: number,
  realStartPoint: number,
  computerRange: number,
) => {
  // 公式：中点坐标 = realRange/2 + range[0]
  // 公式：(realCircleCenter - 中点) /realRange = (computerCircleCenter - 0 ) /computerRange
  // if (!realRange) return;
  const realMiddle: number = bignumberFc.add(bignumberFc.divide(realRange, 2), realStartPoint);
  const computerCircleCenterRes = bignumberFc.multiply(
    bignumberFc.divide(bignumberFc.subtract(realCircleCenter, realMiddle), realRange),
    computerRange,
  );
  return computerCircleCenterRes;
};

const AnovaCircle: React.FC<CirCleProps> = (props: CirCleProps) => {
  // console.log(props, 'props______-');

  const { range, data, boxPlotColorDic } = props;
  const canvasDom = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const pencil = canvasDom.current?.getContext('2d');

    if (!pencil) return;
    pencil?.clearRect(0, 0, 1200, 1200);
    if (!range) return;
    const realRange = bignumberFc.subtract(range[1], range[0]);
    if (!(realRange > 0)) return;
    data.map((item) => {
      // console.log(computerCircleCenter(item.mean, realRange, range[0], 1200), '圆心坐标');
      // console.log(bignumberFc.divide(computerDiameter(item.diameter, realRange, 1200), 2), '半径');

      pencil.beginPath();
      pencil.strokeStyle = boxPlotColorDic[item.parameterX] as string;
      pencil.lineWidth = 12;
      pencil.arc(
        600,
        bignumberFc.subtract(600, computerCircleCenter(item.mean, realRange, range[0], 1200)),
        bignumberFc.divide(computerDiameter(item.diameter, realRange, 1200), 2),
        0,
        2 * Math.PI,
      );
      pencil.stroke();
      pencil.closePath();
    });
   
  }, [range, data]);
  return (
    <div className={styles.container}>
      <canvas ref={canvasDom} width={1200} height={1200} style={{ height: 130, width: 130 }}>
        您的浏览器不反对canvas标签，无奈看到图形
      </canvas>
    </div>
  );
};

注：代码种的bigNumber.办法，可均替换成加减乘除
bigNumber.add(a,b) 即为 a+b
bigNumber.subtract(a,b) 即为 a-b
bigNumber.multiply(a,b) 即为 a*b
bigNumber.divide(a,b) 即为 a/b