一、SVG - 基础

1.svg简单介绍

 1) SVG是一种使用XML技术描述二维图形的语言,svg是一种矢量图

 2) 并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，HTML5只不过提供了SVG原生的内容

 3) svg文件的扩展名为.svg
 
          官网：
     http://www.chartjs.org

2. SVG的优势

 1）可通过文本编辑器来创建和修改

 2）可被搜索引擎搜索到

 3）SVG可在任何的分辨率下被高质量的打印

 4）可在图片质量不下降的情况下被放大

 5）支持事件绑定

3. SVG与canvas的区别

  SVG - 实际开发中，多用SVG

             不依赖分辨率
             支持事件处理器
             不适合游戏
             大型渲染区域的程序(例如，百度地图)
      
  Canvas

             依赖分辨率
             不支持事件绑定
             最适合网页游戏
             可以用图片格式保存图像


             不管是SVG还是Canvas，在一个页面中都可以同时定义多个

4.用途

             静态绘制图形
             动态动画效果
             专门提供事件

5.案例：canvas里引用chart.js制作饼状图

     <div id="" style="width: 300px;height: 300px;">
       <canvas id="canvas" width="400px" height="400px"></canvas>   
    </div>
    <script type="text/javascript">
       var context = document.getElementById("canvas").getContext("2d");
        /*
         * 创建图标对象
         * 
         * 参数1：画布对象
         * 
         * 参数2：数据和配置信息
         * 
         */
       
       var data = {
            //指各种颜色对应的内容，也会改变鼠标放上去以后显示的内容
            
            //对应
            labels: [
               "90后",
               "80后",
               "70后"
              ],
             //表单的数据信息
            datasets: 
            [{
              //所占的大小
              data: [200, 100, 200],   
              backgroundColor: [
               "#FF6384",
               "#36A2EB",
               "#FFCE56"
              ],
              
              
              hoverBackgroundColor: [
               "#FF6384",
               "#36A2EB",
               "#FFCE56"
              ]
            }]
         };
        var myPieChart = new Chart(context,
            { 
              //决定画什么图
              type: 'pie',
              data: data
              
            });

    </script>

6.效果图

Paste_Image.png