chartx3d

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1, maximum-scale=1" /> <title>xChart demo -- 饼图</title> <script type="text/javascript" src="../../lib/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../dist/chartx.js"></script>  <script type="text/javascript" src="../../lib/codemirror/codemirror.js"></script> <script type="text/javascript" src="../../lib/codemirror/active-line.js"></script> <script type="text/javascript" src="../../lib/codemirror/javascript.js"></script> <script type="text/javascript" src="../../lib/codemirror/matchbrackets.js"></script> <link rel="stylesheet" href="../../lib/codemirror/codemirror.css"> <link rel="stylesheet" href="../../lib/codemirror/zenburn.css"> <link rel="stylesheet" href="../../lib/codemirror/docs.css">   <script type="text/javascript" src="../../lib/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="../../lib/bootstrap/css/docs.min.css"> <link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap.min.css">  <script type="text/javascript" src="../../lib/demo.js"></script> <link rel="stylesheet" href="../../lib/demo.css"> </head> <body > <table> <tr> <td id="td-vl"> <form><textarea id="code" name="code"> //chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组 var data = [ ["xfield","人群导入","人群导入_extend"], ["1月1日",165,0.33], ["1月2日",138,0.276], ["1月3日",144,0.288], ["1月4日",119,0.238], ["1月5日",145,0.29], ["1月6日",133,0.266], ["1月7日",134,0.268], ["1月8日",134,0.268], ["1月9日",130,0.26], ["1月10日",143,0.286], ["1月11日",103,0.206], ["1月12日",133,0.266], ["1月13日",134,0.268], ["1月14日",127,0.254], ["1月15日",132,0.264], ["1月16日",134,0.268], ["1月17日",121,0.242], ["1月18日",137,0.274], ["1月19日",125,0.25], ["1月20日",153,0.306], ["1月21日",113,0.226], ["1月22日",114,0.228], ["1月23日",121,0.242], ["1月24日",125,0.25], ["1月25日",140,0.28], ["1月26日",112,0.224], ["1月27日",124,0.248], ["1月28日",140,0.28], ["1月29日",142,0.284], ["1月30日",132,0.264], ["1月31日",116,0.232], ["2月1日",159,0.318], ["2月2日",136,0.272], ["2月3日",155,0.31], ["2月4日",138,0.276], ["2月5日",157,0.314], ["2月6日",122,0.244], ["2月7日",110,0.22], ["2月8日",147,0.294], ["2月9日",135,0.27], ["2月10日",151,0.302], ["2月11日",122,0.244], ["2月12日",152,0.304], ["2月13日",120,0.24], ["2月14日",132,0.264], ["2月15日",115,0.23], ["2月16日",156,0.312], ["2月17日",142,0.284], ["2月18日",137,0.274], ["2月19日",113,0.226], ["2月20日",129,0.258], ["2月21日",118,0.236], ["2月22日",114,0.228], ["2月23日",139,0.278], ["2月24日",129,0.258], ["2月25日",151,0.302], ["2月26日",131,0.262], ["2月27日",124,0.248], ["2月28日",158,0.316], ["2月29日",26,0.052], ["3月1日",139,0.278], ["3月2日",145,0.29], ["3月3日",148,0.296], ["3月4日",122,0.244], ["3月5日",159,0.318], ["3月6日",139,0.278], ["3月7日",142,0.284], ["3月8日",144,0.288], ["3月9日",114,0.228], ["3月10日",156,0.312], ["3月11日",103,0.206], ["3月12日",136,0.272], ["3月13日",115,0.23], ["3月14日",119,0.238], ["3月15日",128,0.256], ["3月16日",123,0.246], ["3月17日",124,0.248], ["3月18日",126,0.252], ["3月19日",114,0.228], ["3月20日",156,0.312], ["3月21日",127,0.254], ["3月22日",124,0.248], ["3月23日",118,0.236], ["3月24日",117,0.234], ["3月25日",122,0.244], ["3月26日",116,0.232], ["3月27日",127,0.254], ["3月28日",108,0.216], ["3月29日",135,0.27], ["3月30日",102,0.204], ["3月31日",102,0.204], ["4月1日",156,0.312], ["4月2日",132,0.264], ["4月3日",123,0.246], ["4月4日",138,0.276], ["4月5日",129,0.258], ["4月6日",148,0.296], ["4月7日",113,0.226], ["4月8日",124,0.248], ["4月9日",116,0.232], ["4月10日",138,0.276], ["4月11日",113,0.226], ["4月12日",136,0.272], ["4月13日",112,0.224], ["4月14日",128,0.256], ["4月15日",119,0.238], ["4月16日",123,0.246], ["4月17日",114,0.228], ["4月18日",113,0.226], ["4月19日",114,0.228], ["4月20日",121,0.242], ["4月21日",117,0.234], ["4月22日",123,0.246], ["4月23日",138,0.276], ["4月24日",114,0.228], ["4月25日",120,0.24], ["4月26日",109,0.218], ["4月27日",115,0.23], ["4月28日",140,0.28], ["4月29日",118,0.236], ["4月30日",87,0.174], ["5月1日",148,0.296], ["5月2日",127,0.254], ["5月3日",131,0.262], ["5月4日",133,0.266], ["5月5日",145,0.29], ["5月6日",132,0.264], ["5月7日",118,0.236], ["5月8日",129,0.258], ["5月9日",105,0.21], ["5月10日",117,0.234], ["5月11日",137,0.274], ["5月12日",126,0.252], ["5月13日",136,0.272], ["5月14日",112,0.224], ["5月15日",142,0.284], ["5月16日",123,0.246], ["5月17日",120,0.24], ["5月18日",129,0.258], ["5月19日",115,0.23], ["5月20日",125,0.25], ["5月21日",126,0.252], ["5月22日",117,0.234], ["5月23日",109,0.218], ["5月24日",113,0.226], ["5月25日",114,0.228], ["5月26日",103,0.206], ["5月27日",109,0.218], ["5月28日",130,0.26], ["5月29日",125,0.25], ["5月30日",116,0.232], ["5月31日",90,0.18], ["6月1日",167,0.334], ["6月2日",135,0.27], ["6月3日",128,0.256], ["6月4日",118,0.236], ["6月5日",124,0.248], ["6月6日",127,0.254], ["6月7日",113,0.226], ["6月8日",115,0.23], ["6月9日",129,0.258], ["6月10日",143,0.286], ["6月11日",114,0.228], ["6月12日",142,0.284], ["6月13日",118,0.236], ["6月14日",137,0.274], ["6月15日",163,0.326], ["6月16日",115,0.23], ["6月17日",141,0.282], ["6月18日",142,0.284], ["6月19日",111,0.222], ["6月20日",144,0.288], ["6月21日",142,0.284], ["6月22日",139,0.278], ["6月23日",130,0.26], ["6月24日",122,0.244], ["6月25日",129,0.258], ["6月26日",129,0.258], ["6月27日",133,0.266], ["6月28日",132,0.264], ["6月29日",140,0.28], ["6月30日",141,0.282], ["7月1日",164,0.328], ["7月2日",132,0.264], ["7月3日",134,0.268], ["7月4日",137,0.274], ["7月5日",124,0.248], ["7月6日",129,0.258], ["7月7日",137,0.274], ["7月8日",136,0.272], ["7月9日",136,0.272], ["7月10日",131,0.262], ["7月11日",139,0.278], ["7月12日",153,0.306], ["7月13日",157,0.314], ["7月14日",157,0.314], ["7月15日",133,0.266], ["7月16日",128,0.256], ["7月17日",105,0.21], ["7月18日",122,0.244], ["7月19日",119,0.238], ["7月20日",133,0.266], ["7月21日",126,0.252], ["7月22日",111,0.222], ["7月23日",127,0.254], ["7月24日",152,0.304], ["7月25日",125,0.25], ["7月26日",115,0.23], ["7月27日",136,0.272], ["7月28日",148,0.296], ["7月29日",138,0.276], ["7月30日",109,0.218], ["7月31日",103,0.206], ["8月1日",172,0.344], ["8月2日",141,0.282], ["8月3日",131,0.262], ["8月4日",153,0.306], ["8月5日",136,0.272], ["8月6日",144,0.288], ["8月7日",143,0.286], ["8月8日",145,0.29], ["8月9日",128,0.256], ["8月10日",142,0.284], ["8月11日",137,0.274], ["8月12日",122,0.244], ["8月13日",146,0.292], ["8月14日",123,0.246], ["8月15日",156,0.312], ["8月16日",133,0.266], ["8月17日",155,0.31], ["8月18日",153,0.306], ["8月19日",136,0.272], ["8月20日",161,0.322], ["8月21日",132,0.264], ["8月22日",136,0.272], ["8月23日",141,0.282], ["8月24日",124,0.248], ["8月25日",137,0.274], ["8月26日",148,0.296], ["8月27日",135,0.27], ["8月28日",119,0.238], ["8月29日",141,0.282], ["8月30日",138,0.276], ["8月31日",115,0.23], ["9月1日",158,0.316], ["9月2日",152,0.304], ["9月3日",138,0.276], ["9月4日",110,0.22], ["9月5日",135,0.27], ["9月6日",123,0.246], ["9月7日",137,0.274], ["9月8日",114,0.228], ["9月9日",169,0.338], ["9月10日",175,0.35], ["9月11日",148,0.296], ["9月12日",126,0.252], ["9月13日",140,0.28], ["9月14日",132,0.264], ["9月15日",151,0.302], ["9月16日",152,0.304], ["9月17日",135,0.27], ["9月18日",157,0.314], ["9月19日",145,0.29], ["9月20日",135,0.27], ["9月21日",151,0.302], ["9月22日",129,0.258], ["9月23日",135,0.27], ["9月24日",166,0.332], ["9月25日",143,0.286], ["9月26日",156,0.312], ["9月27日",134,0.268], ["9月28日",138,0.276], ["9月29日",143,0.286], ["9月30日",139,0.278], ["10月1日",202,0.404], ["10月2日",189,0.378], ["10月3日",165,0.33], ["10月4日",147,0.294], ["10月5日",151,0.302], ["10月6日",156,0.312], ["10月7日",158,0.316], ["10月8日",170,0.34], ["10月9日",136,0.272], ["10月10日",188,0.376], ["10月11日",140,0.28], ["10月12日",139,0.278], ["10月13日",157,0.314], ["10月14日",146,0.292], ["10月15日",174,0.348], ["10月16日",156,0.312], ["10月17日",153,0.306], ["10月18日",153,0.306], ["10月19日",168,0.336], ["10月20日",206,0.412], ["10月21日",174,0.348], ["10月22日",145,0.29], ["10月23日",170,0.34], ["10月24日",177,0.354], ["10月25日",185,0.37], ["10月26日",165,0.33], ["10月27日",179,0.358], ["10月28日",155,0.31], ["10月29日",172,0.344], ["10月30日",153,0.306], ["10月31日",125,0.25], ["11月1日",164,0.328], ["11月2日",163,0.326], ["11月3日",159,0.318], ["11月4日",153,0.306], ["11月5日",190,0.38], ["11月6日",207,0.414], ["11月7日",163,0.326], ["11月8日",176,0.352], ["11月9日",173,0.346], ["11月10日",186,0.372], ["11月11日",169,0.338], ["11月12日",164,0.328], ["11月13日",152,0.304], ["11月14日",170,0.34], ["11月15日",153,0.306], ["11月16日",133,0.266], ["11月17日",127,0.254], ["11月18日",162,0.324], ["11月19日",156,0.312], ["11月20日",159,0.318], ["11月21日",126,0.252], ["11月22日",146,0.292], ["11月23日",143,0.286], ["11月24日",136,0.272], ["11月25日",99,0.198], ["11月26日",123,0.246], ["11月27日",140,0.28], ["11月28日",144,0.288], ["11月29日",143,0.286], ["11月30日",135,0.27], ["12月1日",161,0.322], ["12月2日",143,0.286], ["12月3日",122,0.244], ["12月4日",150,0.3], ["12月5日",161,0.322], ["12月6日",134,0.268], ["12月7日",126,0.252], ["12月8日",156,0.312], ["12月9日",126,0.252], ["12月10日",128,0.256], ["12月11日",137,0.274], ["12月12日",158,0.316], ["12月13日",126,0.252], ["12月14日",123,0.246], ["12月15日",135,0.27], ["12月16日",121,0.242], ["12月17日",102,0.204], ["12月18日",120,0.24], ["12月19日",115,0.23], ["12月20日",142,0.284], ["12月21日",121,0.242], ["12月22日",134,0.268], ["12月23日",144,0.288], ["12月24日",140,0.28], ["12月25日",127,0.254], ["12月26日",137,0.274], ["12月27日",140,0.28], ["12月28日",126,0.252], ["12月29日",119,0.238], ["12月30日",138,0.276], ["12月31日",114,0.228], ["未知",234,0.468] ]; var options = { coord: { type: "polar3d" }, graphs: [ { type: "pie", startAngle: -90, sort: "desc", animation: true, field: "人群导入", label: { enabled: true, field: "xfield", format: function ( val,data ){ var rowData = data.rowData; return "<div><span>"+rowData.name+"</span>：<span>"+rowData.value+"（"+ data.percentage +"%）</span></div>" } } } ], tips: { content: function (info){ var node = info.nodes[0]; return node.label+"："+node.percentage+"%" } }, legend: { position : 'bottom' } } window.chart = Chartx3d.create("canvasTest" , data , options); </textarea></form> </td> <td style="padding:0 10px;" id="td-vr"> <div id="chartdemo-r"> <div class="bs-callout bs-callout-warning" style="margin-top:10px;" id="callout-navs-anchor-disabled"> <span id="run" class="glyphicon glyphicon-play-circle" title="run"></span> <h4>饼图（pie chart）- 基础饼图</h4> <p> 联系人：@释剑 </p> </div> <div class="test-c"> <div id="canvasTest" style='width:100%;height:600px;position:relative;'></div> </div> </div> </td> </tr> </table> </body> </html>