<article class="user_experience">
                    <div class="left">
                        <h5>2014/5--2014/9：大肥羊学校</h5>
                        <h6>所属行业：金融/投资/证券</h6>
                        <div class="introduce">懒羊羊是喜羊羊与灰太狼里的正面人物，关于懒羊羊的介绍： 英文名：Lazy Sheep 小名：</div>
                    </div>
                    <div class="right">
                        <canvas id="piechart1"></canvas>
                    </div>
</article>

<canvas id="piechart1"></canvas>

var pies = [];
var piedatas = set_pie_datas();
var pieids = [‘piechart1‘, ‘piechart2‘];
$(‘#nav‘).delegate(‘a‘, ‘click‘, function() {
        $(this).addClass(‘cur‘).siblings().removeClass(‘cur‘);
        var row = $(this).index();
        $(‘#menu‘).children().hide().eq(row).show().css(‘opacity‘, 0).animate({opacity:‘1‘}, 1000, ‘linear‘, function() {
            if(row != 3) return;
            
            $.each(pieids, function(index, item) {
                if(pies.length <= index) {
                    var pie = draw_pie(piedatas[index], item);
                    pies.push(pie);
                }
            });
});
//画图表
function draw_pie(pieData, id) {
    var piechart = document.getElementById(id).getContext("2d");
    return new Chart(piechart).Pie(pieData);
}
//配置图表信息
function set_pie_datas() {
    var piedatas = [ 
        [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "HTML/CSS"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "HTML5/CSS3"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "JavaScript"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "PHP"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "MySQL"
            }
        ],
        [
            {
                value: 100,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "HTML/CSS"
            },
            {
                value: 80,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "HTML5/CSS3"
            },
            {
                value: 30,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "JavaScript"
            }
        ]
    ];
    return piedatas;
}