storyline运用JavaScript制作饼图效果

代码如下：

function bingtu(yanse){
$("#myCanvas").remove();
mydiv=$(' <canvas id="myCanvas"></canvas> ');//创建元素

var shipin  = $('#juxing div');//获取sl元素，该元素为透明的矩形
$(shipin).before(mydiv);//把以上创建的元素置于矩形的前面

$("#myCanvas").css({"position":"absolute","z-index":"10"});//定位元素
//$(shipin).remove();

 var player = GetPlayer(); //定义变量实例

var myCanvas = document.getElementById("myCanvas"); //获取myCanvas元素
myCanvas.width = $(shipin).width(); //设置元素的长
myCanvas.height = $(shipin).height(); //设置元素的高
     var ctx = myCanvas.getContext("2d"); 
     // 绘制直线函数 // 
     function drawLine(ctx, startX, startY, endX, endY) { 
      ctx.beginPath(); 
      ctx.moveTo(startX, startY); 
      ctx.lineTo(endX, endY); 
     } 
     // 此函数在直线之间绘制一条圆弧。 // 
     function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle) { 
      ctx.beginPath(); 
      ctx.arc(centerX, centerY, radius, startAngle, endAngle); 
      ctx.stroke(); 
     } 
     // 此函数在线条之间绘制一个彩色形状。 // 
     function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) { 
      ctx.fillStyle = color; 
      ctx.beginPath(); 
      ctx.moveTo(centerX, centerY); 
      ctx.arc(centerX, centerY, radius, startAngle, endAngle); 
      ctx.closePath(); 
      ctx.fill(); 
      /* drawLine(_ctx,100,100,200,200); 
      drawArc(_ctx, 150,150,150, 0, Math.PI/3); 
      drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000'); */ 
     } 
     /* 这将检索Storyline变量的值 
      (引号之间的那个). */ 


     // 定义饼图扇形数量，此处的值需要根据项目的数量设置 // 
      var myPersoonlijkheid = { 
       "Categorie1": player.GetVar("var1"), 
       "Categorie2": player.GetVar("var2"), 
       "Categorie3": player.GetVar("var3"), 
       "Categorie4": player.GetVar("var4"), 
       "Categorie5": player.GetVar("var5"),
       "Categorie6": player.GetVar("var6") 
     }; 



     var Piechart = function(options) { 
      this.options = options; 
      this.canvas = options.canvas; 
      this.ctx = this.canvas.getContext("2d"); 
      this.colors = options.colors; 
      this.draw = function() { 
       var total_value = 0; 
       var color_index = 0; 
       for (var categ in this.options.data) { 
        var val = this.options.data[categ]; 
        total_value += val; 
       } 
       var start_angle = 0; 
       for (categ in this.options.data) { 
        val = this.options.data[categ]; 
        var slice_angle = 2 * Math.PI * val/total_value; 
        drawPieSlice(this.ctx, this.canvas.width/2, this.canvas.height/2, Math.min(this.canvas.width/2, this.canvas.height/2), start_angle, start_angle + slice_angle, this.colors[color_index % this.colors.length]); 
        start_angle += slice_angle; 
        color_index++; 
       } 
      } 
     } 
     var myPiechart = new Piechart({ 
      canvas: myCanvas, 
      data: myPersoonlijkheid, 
      colors: yanse.split(",")
     }); 
     myPiechart.draw(); 

}
var yanse="#f2f2f2, #b3dcff, #1b96ff, #004682, #002311, #005346";//设置颜色，与扇形的数量对应
bingtu(yanse);
//自适应处理
window.onresize = function() {
        var res;
        if (res){clearTimeout(res)}
        res = setTimeout(function(){
bingtu(yanse);
},20);
    };