標籤：nat key turn pre start zip ima ant list
ichartjs資源套件下載：https://files.cnblogs.com/files/xiandedanteng/ichartjs-ichartjs1.2.zip
本例：https://files.cnblogs.com/files/xiandedanteng/ichartjsSample01.rar
效果：
頁面代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <script src="ichart.1.2.min.js"></script> <body> <div id=‘canvasDiv‘></div> </body></html><script type="text/javascript"><!-- //定義資料 var data = [ {name : ‘H‘,value : 7,color:‘#a5c2d5‘}, {name : ‘E‘,value : 5,color:‘#cbab4f‘}, {name : ‘L‘,value : 12,color:‘#76a871‘}, {name : ‘L‘,value : 12,color:‘#76a871‘}, {name : ‘O‘,value : 5,color:‘#a56f8f‘}, {name : ‘W‘,value : 13,color:‘#c12c44‘}, {name : ‘O‘,value : 15,color:‘#a56f8f‘}, {name : ‘R‘,value : 28,color:‘#9f7961‘}, {name : ‘L‘,value : 12,color:‘#76a871‘}, {name : ‘D‘,value : 4,color:‘#6f83a5‘} ]; $(function(){ var chart = new iChart.Column2D({ render : ‘canvasDiv‘,//渲染的Dom目標,canvasDiv為Dom的ID data: data,//綁定資料 title : ‘ichartjs Sample‘,//設定標題 width : 800,//設定寬度，預設單位為px height : 400,//設定高度，預設單位為px shadow:true,//啟用陰影 shadow_color:‘#c7c7c7‘,//設定陰影顏色 coordinate:{//配置自訂座標軸 scale:[{//配置自訂值軸 position:‘left‘,//配置左值軸 start_scale:0,//設定開始刻度為0 end_scale:26,//設定結束刻度為26 scale_space:2,//設定刻度間距 listeners:{//配置事件 parseText:function(t,x,y){//設定解析值軸文本 return {text:t+" cm"} } } }] } }); //調用繪圖方法開始繪圖 chart.draw(); });//--></script>
ichartjs 製作的圖表
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
