• SVG饼图的绘制方法


    在新公司工作大半年了,使用过SVG绘制几个折线CHART和柱状CHART,当前工作中还没有遇到需要绘制饼图的情况,最近工作悠闲,先提前学习一下饼图的绘制方法以备以后万一。

    参考了公司之前的代码,是通过坐标变换和旋转而绘制出来的,比较简洁。而我自己则写了另外一套方法,通过计算各个弧线点的方式(没有坐标变换和旋转),稍微复杂了些。不过可以自由调节其弧的初始角度,而公司以前的第一个弧总是水平的,另外可以在饼图上添加一些文本信息(坐标通过类似方法取得,目前看不上不是很完美)。可能以后扩展会方便些吧。

    绘制弧度的方法如下:

    椭圆圆弧曲线 A 或 a
    语法是 "A rx ry x-axis-rotation large-arc-flag sweep-flag x y" 共 7 个参数
    rx ,ry 是椭圆弧的半长轴,半短轴长度
    x-axis-rotation 是此段弧所在的椭圆的 x 轴与水平方向的夹角,即 x 轴的旋转角度
    large-arc-flag 和 sweep-flag 决定了椭圆弧的绘制方向,值是 0 或 1
    x,y 是椭圆弧终端坐标
    椭圆圆心是计算出来的,不需要指定
    large-arc-flag 为1 表示大角度弧线,0 代表小角度弧线
    sweep-flag , 1 代表从起点到终点弧线绕椭圆中心顺时针方向,0 代表逆时针方向

    2种方法都需要计算弧度点的坐标,也就是sin和cos值,需要引入JS函数。

    pie.xsl 是自己的方法,其中很多参数有点重复。

    pie2.xsl是参考公司的方法。

    运行结果如下图:(输出到PDF当中,也可以修改下输出为单独的SVG文件,其中上面的是pie.xsl,下面的是pie2.xsl)

    代码如下 :https://files.cnblogs.com/qingzhou/pie-svg.rar(pie.xsl,pie2.xsl是2个转换文件,data.xml是数据文件)

  • 相关阅读:
    word2010怎么把白色方框变成黑色方框?
    Ubuntu 14.04 安装 Sublime Text 3
    安装xmlspy之后,链接及邮箱等都用这个软件打开,怎样取消?
    SRAM、DRAM、SDRAM、DDR、DDR2、DDR3
    ROM和RAM区别
    shell脚本分析一
    重要网址
    vi/vim
    dump_stack使用
    BIOS、BootLoader、uboot对比
  • 原文地址:https://www.cnblogs.com/qingzhou/p/1810256.html
Copyright © 2020-2023  润新知