统计图的位图与矢量图

2017-10-13

d3.js 用的svg,矢量图. echarts是canvas,位图.还没找见可以用代码互转的办法.

d3.js的导出,也就是svg的导出

使用canvg

主要引入

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>

<body> 
    <!-- svg存放 -->
    <div id="container"></div> 
    <!-- canvas存放 -->
    <canvas id="canvas" width="200px" height="200px"></canvas>
    <!-- 触发 -->
    <button id="save">save</button>
    <script>
        function saveDaPicture() {
            var img = document.getElementById('canvas').toDataURL("image/png");
            $('body').append('<img src="' + img + '"/>');
        }
        $(function () {
            $('#save').click(function () {
                var svg = $('#container').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
                // 这样会多一个base64的图出来.
                canvg('canvas', svg, { renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true });
            });
        })
    </script>
</body>

针对SVG的展示库

pablojs,这个可能会简单些.因为是专门针对svg的.

主要引入

<script src="pablo.min.js"></script>

给一个button加事件内如如下

Pablo(demoElement).svg({height:180})
/* Append a <circle> element with attributes */
.circle({cx:90, cy:90, r:90, fill:'red'})
/* Add an event listener to the circle */
.on('click', function(event){
    /* On click, set the `fill` attribute */
    Pablo(this).attr('fill', 'green');
});

svg的导出和查看

导出svg

就是一个xml文件,
1
2
3
<xml>
<svg>...<svg>
</xml>
导出png,位图,用canvas

查看

1.直接查看svg图片

2.浏览器直接打开

3.在HTML中使用\标签引用

4.直接在HTML中使用SVG标签

5.作为CSS背景
div 的内容转svg 示例

日常使用xls导出矢量图,tiff格式.因为不能用svg看,他是XML文件,直接打开是看不到图的.

xls,visio

xls 做好图,直接复制到visio里,在visio另存为.tiff格式.或者emf格式
xls,pdf,ps

xls 做好图,打印,选择生成pdf文件,然后用ps打开,另存为tiff格式.

有个统计语言环境R..svg.tiff或者pdf都可以导出参考.

raphael.js (github) 也是矢量图

关于位图的另类使用,…只是觉得有点另类,矢量图不同于canvas制作动画.

插件snapsvg,中文教程.

插件svg.js,教程