xChart demo -- 饼图

//chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组
var data= [
    ["name"   , "value", "r" , "city"],
    ["ie"     , 320    , 122 , "杭州"],
    ["firefox", 213    , 132 , "杭州"],
    ["safari" , 12    , 321 , "杭州"],
    ["chrome" , 12    , 192  , "杭州"],
    ["其他"    , 10    , 382 , "杭州"],
    ["uc"     , 10    , 232 , "北京"],
    ["百度"    , 200    , 321 , "北京"],
    ["腾讯"    , 80     , 89 , "北京"]    
];

var options = {
    coord : {
        type : "polar3d"
    },
    graphs : [
        {
            type : "pie",

allAngles: 300,

field : "value",
            groupField: "name",

//饼图的起始角度[有效值范围0-360度，默认值0度
            //饼图的绘制是从起始角度开始，顺时针绘制，参考饼图的绘制动画.
            startAngle:-180,
            //数据排序，默认按用户给定顺序[desc/asc]
            sort: 'desc',
           
            //是否允许动画
            //animation: true,

//周边tip
            label : {
                enabled: true,
                //是否绘制连接线(注意：此配置仅限于扇形块比较分散，若扇形比较紧密时，无连线会导致识别混淆)
                //allowLine:false,
                //format : function( name, data ){
                //    var rowData = data.rowData;
                //    return "<div><span>"+name+"</span>：<span>"+rowData.value+"（"+ data.percentage +"%）</span></div>"
                //}
            },
            node : {
               // radius : 30,
                //r : "r", //如果是丁格尔玫瑰，就有半径的Field
                select : {
                    enabled : true
                },
                onclick : function( e , nodeData ){

if( !nodeData.selected ){
                        this.selectAt( nodeData.iNode );
                    } else {
                        this.unselectAt( nodeData.iNode );
                    };

}
            }
        }
    ],
    
    tips : {
        content : function(info){
            var node = info.nodes[0];
            return node.label+"："+node.percentage+"%"
        }
    },
    legend: {}
};

window.chart = Chartx3d.create("canvasTest" , data , options);

饼图（pie chart）- 基础饼图

联系人：@释剑