├── .gitignore ├── samples ├── images │ ├── st_bg.png │ ├── ichart_arrow.png │ ├── ichart_logo.png │ ├── ichart_top_bg.png │ └── ichart_menu_line.png ├── jq-ui │ └── themes │ │ ├── base │ │ ├── images │ │ │ ├── ui-icons_222222_256x240.png │ │ │ ├── ui-icons_2e83ff_256x240.png │ │ │ ├── ui-icons_454545_256x240.png │ │ │ ├── ui-icons_888888_256x240.png │ │ │ ├── ui-icons_cd0a0a_256x240.png │ │ │ ├── ui-bg_flat_0_aaaaaa_40x100.png │ │ │ ├── ui-bg_flat_75_ffffff_40x100.png │ │ │ ├── ui-bg_glass_55_fbf9ee_1x400.png │ │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ │ ├── ui-bg_glass_75_dadada_1x400.png │ │ │ ├── ui-bg_glass_75_e6e6e6_1x400.png │ │ │ ├── ui-bg_glass_95_fef1ec_1x400.png │ │ │ └── ui-bg_highlight-soft_75_cccccc_1x100.png │ │ ├── jquery.ui.base.css │ │ ├── jquery.ui.all.css │ │ ├── jquery.ui.progressbar.css │ │ ├── jquery.ui.accordion.css │ │ ├── jquery.ui.resizable.css │ │ ├── jquery.ui.slider.css │ │ ├── jquery.ui.dialog.css │ │ ├── jquery.ui.tabs.css │ │ └── jquery.ui.core.css │ │ └── ui-lightness │ │ ├── images │ │ ├── ui-icons_222222_256x240.png │ │ ├── ui-icons_228ef1_256x240.png │ │ ├── ui-icons_ef8c08_256x240.png │ │ ├── ui-icons_ffd27a_256x240.png │ │ ├── ui-icons_ffffff_256x240.png │ │ ├── ui-bg_flat_10_000000_40x100.png │ │ ├── ui-bg_glass_100_f6f6f6_1x400.png │ │ ├── ui-bg_glass_100_fdf5ce_1x400.png │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ ├── ui-bg_gloss-wave_35_f6a828_500x100.png │ │ ├── ui-bg_highlight-soft_75_ffe45c_1x100.png │ │ ├── ui-bg_diagonals-thick_18_b81900_40x40.png │ │ ├── ui-bg_diagonals-thick_20_666666_40x40.png │ │ └── ui-bg_highlight-soft_100_eeeeee_1x100.png │ │ ├── jquery.ui.base.css │ │ ├── jquery.ui.all.css │ │ ├── jquery.ui.progressbar.css │ │ ├── jquery.ui.accordion.css │ │ ├── jquery.ui.resizable.css │ │ ├── jquery.ui.slider.css │ │ ├── jquery.ui.dialog.css │ │ ├── jquery.ui.tabs.css │ │ └── jquery.ui.core.css ├── test.html ├── notsupport.html ├── css │ ├── demo.css │ └── style.css └── html │ ├── area2d_01.html │ ├── line2d_01.html │ ├── pie2d_01.html │ ├── bar2d_01.html │ ├── column2d_01.html │ ├── app_01.html │ ├── bar2d_05.html │ ├── column3d_01.html │ ├── donut2d_04.html │ ├── animation_pie2d_01.html │ ├── columnmulti2d_01.html │ ├── column2d_03.html │ ├── event_column2d_01.html │ ├── barmulti2d_01.html │ ├── event_pie2d_01.html │ ├── custom_column2d_01.html │ ├── bar2d_03.html │ ├── custom_column2d_02.html │ ├── bar2d_02.html │ ├── column2d_02.html │ ├── animation_bar2d_01.html │ ├── column3d_02.html │ ├── line2d_05.html │ ├── bar2d_04.html │ ├── donut2d_02.html │ ├── donut2d_03.html │ ├── donut2d_01.html │ ├── line2d_02.html │ ├── pie2d_04.html │ └── pie3d_03.html ├── docs ├── zh │ ├── resources │ │ ├── ichart_top_bg.png │ │ └── ichart_ipa_logo.png │ ├── html │ │ ├── top.html │ │ └── home.html │ └── index.html ├── en │ ├── resources │ │ └── ichart_ipa_logo.png │ ├── html │ │ ├── top.html │ │ └── home.html │ └── index.html └── index.html ├── plugin ├── README.md ├── ichart.ajax.js ├── ichart.customize.js └── ichart.sign.js ├── minify ├── ichart.pie2d.minify.js ├── ichart.area2d.minify.js ├── ichart.column3d.minify.js ├── ichart.columnmulti3d.minify.js ├── ichart.columnstacked3d.minify.js ├── ichart.bar2d.minify.js ├── ichart.column2d.minify.js ├── ichart.custom.minify.js ├── ichart.barmulti2d.minify.js ├── ichart.columnmulti2d.minify.js ├── ichart.columnstacked2d.minify.js ├── ichart.barstacked2d.minify.js ├── ichart.donut2d.minify.js ├── ichart.rectangle2d.minify.js ├── ichart.rectangle3d.minify.js ├── ichart.linebasic2d.minify.js ├── ichart.text.minify.js ├── ichart.rectangle.minify.js ├── ichart.component.minify.js ├── ichart.crosshair.minify.js ├── ichart.sector3d.minify.js ├── ichart.sector2d.minify.js ├── ichart.bar.minify.js ├── ichart.tip.minify.js ├── ichart.html.minify.js ├── ichart.element.minify.js ├── ichart.label.minify.js ├── ichart.linemonitor2d.minify.js ├── ichart.column.minify.js ├── ichart.painter.minify.js ├── ichart.pie3d.minify.js ├── ichart.line.minify.js ├── ichart.sector.minify.js └── ichart.pie.minify.js ├── package.json ├── src ├── ichart.pie2d.js ├── ichart.area2d.js ├── ichart.bar2d.js ├── ichart.column2d.js ├── ichart.barmulti2d.js ├── ichart.columnmulti2d.js ├── ichart.column3d.js ├── ichart.columnmulti3d.js ├── ichart.custom.js ├── ichart.columnstacked2d.js ├── ichart.barstacked2d.js ├── ichart.columnstacked3d.js ├── ichart.donut2d.js ├── ichart.rectangle2d.js ├── ichart.rectangle3d.js ├── ichart.linebasic2d.js ├── ichart.sector2d.js └── ichart.sector3d.js ├── test └── data.js ├── README.md └── todo.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | *.iml 4 | node_modules 5 | 6 | -------------------------------------------------------------------------------- /samples/images/st_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/images/st_bg.png -------------------------------------------------------------------------------- /samples/images/ichart_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/images/ichart_arrow.png -------------------------------------------------------------------------------- /samples/images/ichart_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/images/ichart_logo.png -------------------------------------------------------------------------------- /samples/images/ichart_top_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/images/ichart_top_bg.png -------------------------------------------------------------------------------- /docs/zh/resources/ichart_top_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/docs/zh/resources/ichart_top_bg.png -------------------------------------------------------------------------------- /samples/images/ichart_menu_line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/images/ichart_menu_line.png -------------------------------------------------------------------------------- /docs/en/resources/ichart_ipa_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/docs/en/resources/ichart_ipa_logo.png -------------------------------------------------------------------------------- /docs/zh/resources/ichart_ipa_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/docs/zh/resources/ichart_ipa_logo.png -------------------------------------------------------------------------------- /plugin/README.md: -------------------------------------------------------------------------------- 1 | 2 | plugin in this Directory is in the test,not suitable for production 3 | ------------------------------------------------------------------- 4 | 5 | 6 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-icons_2e83ff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-icons_2e83ff_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-icons_454545_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-icons_454545_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-icons_888888_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-icons_888888_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-icons_cd0a0a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-icons_cd0a0a_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_flat_75_ffffff_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_flat_75_ffffff_40x100.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_glass_75_dadada_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_glass_75_dadada_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-icons_228ef1_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-icons_228ef1_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-icons_ef8c08_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-icons_ef8c08_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-icons_ffd27a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-icons_ffd27a_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-icons_ffffff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-icons_ffffff_256x240.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_flat_10_000000_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_flat_10_000000_40x100.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghetommy/ichartjs/HEAD/samples/jq-ui/themes/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png -------------------------------------------------------------------------------- /minify/ichart.pie2d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Pie2D=iChart.extend(iChart.Pie,{configure:function(){iChart.Pie2D.superclass.configure.call(this);this.type="pie2d"},doConfig:function(){iChart.Pie2D.superclass.doConfig.call(this);var a=this._();a.push("sub_option.radius",a.r);a.parse(a)}});iChart.register("Pie2D"); -------------------------------------------------------------------------------- /minify/ichart.area2d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Area2D=iChart.extend(iChart.LineBasic2D,{configure:function(){iChart.Area2D.superclass.configure.call(this);this.type="area2d";this.set({area_opacity:0.3})},doConfig:function(){this.push("sub_option.area",!0);iChart.Area2D.superclass.doConfig.call(this)}});iChart.register("Area2D"); -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.base.css: -------------------------------------------------------------------------------- 1 | @import url("jquery.ui.core.css"); 2 | @import url("jquery.ui.resizable.css"); 3 | @import url("jquery.ui.accordion.css"); 4 | @import url("jquery.ui.dialog.css"); 5 | @import url("jquery.ui.slider.css"); 6 | @import url("jquery.ui.tabs.css"); 7 | @import url("jquery.ui.progressbar.css"); -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.base.css: -------------------------------------------------------------------------------- 1 | @import url("jquery.ui.core.css"); 2 | @import url("jquery.ui.resizable.css"); 3 | @import url("jquery.ui.accordion.css"); 4 | @import url("jquery.ui.dialog.css"); 5 | @import url("jquery.ui.slider.css"); 6 | @import url("jquery.ui.tabs.css"); 7 | @import url("jquery.ui.progressbar.css"); -------------------------------------------------------------------------------- /minify/ichart.column3d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Column3D=iChart.extend(iChart.Column2D,{configure:function(){iChart.Column3D.superclass.configure.call(this);this.type="column3d";this.dimension=iChart._3D;this.set({coordinate:{},xAngle:60,yAngle:20,zScale:1,bottom_scale:1.4})},doConfig:function(){iChart.Column3D.superclass.doConfig.call(this)}});iChart.register("Column3D"); -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.all.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI CSS Framework 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming 9 | */ 10 | @import "jquery.ui.base.css"; 11 | @import "jquery.ui.theme.css"; 12 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.all.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI CSS Framework 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming 9 | */ 10 | @import "jquery.ui.base.css"; 11 | @import "jquery.ui.theme.css"; 12 | -------------------------------------------------------------------------------- /minify/ichart.columnmulti3d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.ColumnMulti3D=iChart.extend(iChart.ColumnMulti2D,{configure:function(){iChart.ColumnMulti3D.superclass.configure.call(this);this.type="columnmulti3d";this.dataType="complex";this.dimension=iChart._3D;this.set({xAngle:60,yAngle:20,zScale:1,group_fator:0.3,bottom_scale:1.4})},doConfig:function(){iChart.ColumnMulti3D.superclass.doConfig.call(this)}});iChart.register("ColumnMulti3D"); -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.progressbar.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Progressbar 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Progressbar#theming 9 | */ 10 | .ui-progressbar { height:2em; text-align: left; overflow: hidden; } 11 | .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.progressbar.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Progressbar 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Progressbar#theming 9 | */ 10 | .ui-progressbar { height:2em; text-align: left; overflow: hidden; } 11 | .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } -------------------------------------------------------------------------------- /minify/ichart.columnstacked3d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.ColumnStacked3D=iChart.extend(iChart.ColumnStacked2D,{configure:function(){iChart.ColumnStacked3D.superclass.configure.call(this);this.type="columnstacked3d";this.dataType="stacked";this.dimension=iChart._3D;this.set({percent:!1,sub_option:{label:{color:"#ffffff"},valueAlign:"middle"},coordinate:{},xAngle:60,yAngle:20,zScale:1,bottom_scale:1.4})},doConfig:function(){iChart.ColumnStacked3D.superclass.doConfig.call(this)}});iChart.register("ColumnStacked3D"); -------------------------------------------------------------------------------- /docs/en/html/top.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ichartjs API 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /docs/zh/html/top.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ichartjs API 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ichartjs", 3 | "version": "1.2.1", 4 | "description": "ichartjs project", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "taylor", 9 | "license": "apache license 2.0", 10 | "devDependencies": { 11 | "grunt": "~1.0.0", 12 | "grunt-contrib-concat": "^1.0.1", 13 | "grunt-contrib-jshint": "~1.1.0", 14 | "grunt-contrib-nodeunit": "~1.0.0", 15 | "grunt-contrib-uglify": "~3.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /minify/ichart.bar2d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Bar2D=iChart.extend(iChart.Bar,{configure:function(){iChart.Bar2D.superclass.configure.call(this);this.type="bar2d"},doEngine:function(a,l,m,e,h,i,f,j,k,g){var c;a.data.each(function(d,b){c=(d.value-e.start)*h/e.distance;a.doParse(a,d,b,{id:b,originy:g+b*f,width:Math.abs(c),originx:j+(0a.get("donutwidth")?a.push("donutwidth",Math.floor(b*a.get("donutwidth"))):a.get("donutwidth")>=b&&a.push("donutwidth",0),a.push("sub_option.donutwidth",a.get("donutwidth")));$.isString(a.get("center"))&&a.push("center",$.applyIf({text:a.get("center")},a.default_.center));""!=a.get("center.text")&&(a.push("center.originx",a.get(a.X)),a.push("center.originy",a.get(a.Y)),a.push("center.textBaseline","middle"),a.center=new $.Text(a.get("center"),a),a.components.push(a.center));a.parse(a)}});iChart.register("Donut2D"); -------------------------------------------------------------------------------- /plugin/ichart.customize.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * simple ichartjs plugin template 3 | * version: 1.0 4 | * @requires ichartjs v1.0 or later,jquery 5 | * @site http://www.ichartjs.com/ 6 | * @author taylor 7 | * @Copyright 2013-2023 8 | */ 9 | iChart.override(iChart.Rectangle2D, { 10 | drawRectangle : function() { 11 | /** 12 | * 原来的方法 13 | */ 14 | // this.T.box( 15 | // this.get(this.X),//矩形左上角x坐标 16 | // this.get(this.Y),//矩形左上角y坐标 17 | // this.get(this.W),//矩形宽度 18 | // this.get(this.H),//矩形高度 19 | // this.get('border'),//矩形边框 20 | // this.get('f_color'),//矩形填充颜色 21 | // this.get('shadow'));//矩形阴影 22 | 23 | /** 24 | * 可以根据上述参数，利用this.T.c自行实现绘制矩形的效果 25 | * this.T.canvas：原生的canvas对象 26 | * this.T.c：原生的canvas对象的Context2D对象 27 | * eg: 28 | */ 29 | this.T.c.fillStyle = 'green'; 30 | this.T.c.fillRect(this.get(this.X),this.get(this.Y),this.get(this.W),this.get(this.H)); 31 | 32 | } 33 | }); -------------------------------------------------------------------------------- /src/ichart.area2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the area2d componment 3 | * @component#@chart#iChart.Area2D 4 | * @extend#iChart.LineBasic2D 5 | */ 6 | iChart.Area2D = iChart.extend(iChart.LineBasic2D, { 7 | /** 8 | * initialize the context for the area2d 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.Area2D.superclass.configure.call(this); 15 | 16 | this.type = 'area2d'; 17 | 18 | this.set({ 19 | /** 20 | * @cfg {Float} Specifies the opacity of this area.(default to 0.3) 21 | */ 22 | area_opacity : 0.3 23 | }); 24 | 25 | }, 26 | doConfig : function() { 27 | /** 28 | * must apply the area's config before 29 | */ 30 | this.push('sub_option.area', true); 31 | iChart.Area2D.superclass.doConfig.call(this); 32 | } 33 | }); 34 | iChart.register('Area2D'); 35 | /** 36 | * @end 37 | */ 38 | -------------------------------------------------------------------------------- /src/ichart.bar2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview this component will draw a bar2d chart. 3 | * @component#@chart#iChart.Bar2D 4 | * @extend#iChart.Bar 5 | */ 6 | iChart.Bar2D = iChart.extend(iChart.Bar, { 7 | /** 8 | * initialize the context for the pie 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.Bar2D.superclass.configure.call(this); 15 | 16 | this.type = 'bar2d'; 17 | 18 | }, 19 | doEngine:function(_,bh,s,S,So,W,h2,gw,x,y,x0){ 20 | iChart.each(_.data,function(d, i) { 21 | _.rect(_,d, i,x,y + i * gw,W,S,So); 22 | _.doLabel(_,i, d.name, x0, y + i * gw + h2); 23 | }, _); 24 | }, 25 | doConfig : function() { 26 | iChart.Bar2D.superclass.doConfig.call(this); 27 | /** 28 | * start up engine 29 | */ 30 | this.engine(this); 31 | } 32 | }); 33 | iChart.register('Bar2D'); 34 | /** 35 | * @end 36 | */ 37 | -------------------------------------------------------------------------------- /src/ichart.column2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the column2d componment 3 | * @component#@chart#iChart.Column2D 4 | * @extend#iChart.Column 5 | */ 6 | iChart.Column2D = iChart.extend(iChart.Column, { 7 | /** 8 | * initialize the context for the Column2D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.Column2D.superclass.configure.call(this); 15 | 16 | this.type = 'column2d'; 17 | }, 18 | doEngine:function(_,cw,s,S,So,H,w2,q,gw,x,y,y0){ 19 | iChart.each(_.data,function(d, i) { 20 | _.rect(_,d, i,x + i * gw,y,H,S,So); 21 | _.doLabel(_,i, d.name, x + gw * i + w2, y0); 22 | }, _); 23 | }, 24 | doConfig : function() { 25 | iChart.Column2D.superclass.doConfig.call(this); 26 | 27 | /** 28 | * start up engine 29 | */ 30 | this.engine(this); 31 | 32 | } 33 | }); 34 | iChart.register('Column2D'); 35 | /** 36 | *@end 37 | */ -------------------------------------------------------------------------------- /minify/ichart.rectangle2d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Rectangle2D=iChart.extend(iChart.Rectangle,{configure:function(){iChart.Rectangle2D.superclass.configure.apply(this,arguments);this.type="rectangle2d";this.set({shadow_offsety:-2})},drawRectangle:function(){var a=this._();a.T.box(a.get(a.X),a.get(a.Y),a.get(a.W),a.get(a.H),a.get("border"),a.get("f_color"),a.get("shadow"))},isEventValid:function(a,b){return{valid:a.x>b.x&&a.xb.y}},tipInvoke:function(){var a=this._();return function(b,d){return{left:a.tipX(b,d),top:a.tipY(b,d)}}},doConfig:function(){iChart.Rectangle2D.superclass.doConfig.call(this);var a=this._(),b=a.get("tipAlign");b==a.L||b==a.R?a.tipY=function(b,c){return a.get("centery")-c/2}:a.tipX=function(b){return a.get("centerx")-b/2};b==a.L?a.tipX=function(b){return a.x-a.get("value_space")-b}:b==a.R?a.tipX=function(){return a.x+a.width+a.get("value_space")}:a.tipY=b==a.B?function(){return a.y+a.height+3}:function(b,c){return a.y-c-3};a.applyGradient()}}); -------------------------------------------------------------------------------- /docs/en/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ichartjs Document 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | <H2>Frame Alert</H2> 19 | This document is designed to be viewed using the frames feature. If you see this message, you are using a non-frame-capable web client. 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/zh/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ichartjs Document 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | <H2>Frame Alert</H2> 19 | This document is designed to be viewed using the frames feature. If you see this message, you are using a non-frame-capable web client. 20 | 21 | 22 | -------------------------------------------------------------------------------- /minify/ichart.rectangle3d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Rectangle3D=iChart.extend(iChart.Rectangle,{configure:function(){iChart.Rectangle3D.superclass.configure.apply(this,arguments);this.type="rectangle3d";this.dimension=iChart._3D;this.set({zHeight:void 0,xAngle:60,yAngle:20,xAngle_:void 0,yAngle_:void 0,shadow_offsetx:2})},drawRectangle:function(){var a=this._();a.T.cube(a.get(a.X),a.get(a.Y),a.get("xAngle_"),a.get("yAngle_"),a.get(a.W),a.get(a.H),a.get("zHeight"),a.get("f_color"),a.get("border.enable"),a.get("border.width"),a.get("light_color"),a.get("shadow"))},isEventValid:function(a,b){return{valid:a.x>b.x&&a.xb.y}},tipInvoke:function(){var a=this._();return function(b,c){return{left:a.topCenterX-b/2,top:a.topCenterY-c}}},doConfig:function(){iChart.Rectangle3D.superclass.doConfig.call(this);var a=this._();a.pushIf("zHeight",a.get(a.W));a.topCenterX=a.x+(a.get(a.W)+a.get(a.W)*a.get("xAngle_"))/2;a.topCenterY=a.y-a.get(a.W)*a.get("yAngle_")/2-a.get("value_space");a.get("valueAlign")==a.O&&a.label&&(a.label.push("textx",a.topCenterX),a.label.push("texty",a.topCenterY))}}); -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.accordion.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Accordion 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Accordion#theming 9 | */ 10 | /* IE/Win - Fix animation bug - #4615 */ 11 | .ui-accordion { width: 100%; } 12 | .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } 13 | .ui-accordion .ui-accordion-li-fix { display: inline; } 14 | .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } 15 | .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } 16 | .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } 17 | .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } 18 | .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } 19 | .ui-accordion .ui-accordion-content-active { display: block; } 20 | -------------------------------------------------------------------------------- /minify/ichart.linebasic2d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.LineBasic2D=iChart.extend(iChart.Line,{configure:function(){iChart.LineBasic2D.superclass.configure.call(this);this.type="basicline2d";this.tipInvokeHeap=[]},doAnimation:function(a,b,f){f.lines.each(function(c){c.get("points").each(function(e){e.y=c.y-Math.ceil(f.animationArithmetic(a,0,c.y-e.y_,b))});c.drawSegment()})},doConfig:function(){iChart.LineBasic2D.superclass.doConfig.call(this);var a=this._(),b,f=a.coo.valid_height,c=a.get("point_space"),e,h,i,m=a.get("sub_option.originx"),k,j;a.push("sub_option.tip.showType","follow");a.push("sub_option.coordinate",a.coo);a.push("sub_option.tipInvokeHeap",a.tipInvokeHeap);a.push("sub_option.point_space",c);a.data.each(function(d){b=a.coo.getScale(d.scaleAlign||a.get("scaleAlign"));k=a.get("sub_option.originy")-b.basic*f;e=[];d.value.each(function(g,l){h=c*l;i=(g-b.start)*f/b.distance;j={x:m+h,y:k-i,value:g,text:d.name+" "+g};iChart.merge(j,a.fireEvent(a,"parsePoint",[d,g,h,i,l,b]));e.push(j)},a);iChart.merge(a.get("sub_option"),d);a.push("sub_option.points",e);a.push("sub_option.brushsize",d.linewidth||d.line_width);a.lines.push(new iChart.LineSegment(a.get("sub_option"),a))},this)}});iChart.register("LineBasic2D"); -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.accordion.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Accordion 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Accordion#theming 9 | */ 10 | /* IE/Win - Fix animation bug - #4615 */ 11 | .ui-accordion { width: 100%; } 12 | .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } 13 | .ui-accordion .ui-accordion-li-fix { display: inline; } 14 | .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } 15 | .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } 16 | .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } 17 | .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } 18 | .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } 19 | .ui-accordion .ui-accordion-content-active { display: block; } 20 | -------------------------------------------------------------------------------- /minify/ichart.text.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Text=iChart.extend(iChart.Component,{configure:function(){iChart.Text.superclass.configure.apply(this,arguments);this.type="text";this.set({text:"",textAlign:"center",align:"center",background_color:0,textBaseline:"top",border:{enable:!1},width:0,height:0,padding:0,writingmode:"lr",line_height:16,rotate:0});this.registerEvent()},doDraw:function(a){a.get("box_feature")&&a.T.box(a.x,a.y,a.get(a.W),a.get(a.H),a.get("border"),a.get("f_color"));a.T.text(a.get("text"),a.get("textx"),a.get("texty"),a.get(a.W)-a.get("hpadding"),a.get("color"),a.get("textAlign"),a.get("textBaseline"),a.get("fontStyle"),a.get("writingmode"),a.get("line_height"),a.get("shadow"),a.get("rotate"))},isEventValid:function(){return{valid:!1}},doLayout:function(a,c,d,b){b.x=b.push(b.X,b.x+a);b.y=b.push(b.Y,b.y+c);b.push("textx",b.get("textx")+a);b.push("texty",b.get("texty")+c)},doConfig:function(){iChart.Text.superclass.doConfig.call(this);var a=this._(),c=a.x,d=a.y+a.get("padding_top"),b=a.get(a.W),e=a.get(a.H),f=a.get("textAlign"),c=c+(f==a.C?b/2:f==a.R?b-a.get("padding_right"):a.get("padding_left"));e&&(d+=e/2,a.push("textBaseline","middle"));a.push("textx",c);a.push("texty",d);a.push("box_feature",b&&e);a.applyGradient()}}); -------------------------------------------------------------------------------- /minify/ichart.rectangle.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Rectangle=iChart.extend(iChart.Component,{configure:function(){iChart.Rectangle.superclass.configure.apply(this,arguments);this.type="rectangle";this.set({width:0,height:0,value_space:4,value:"",label:{},name:"",tipAlign:"top",valueAlign:"top",shadow_blur:3,shadow_offsety:-1});this.atomic=!0;this.registerEvent("parseText");this.label=null},last:function(a){a.label&&a.label.draw()},doDraw:function(a){a.drawRectangle()},doConfig:function(){iChart.Rectangle.superclass.doConfig.call(this);var a=this._(),b=a.variable.event,c=a.get("valueAlign");iChart.taylor.light(a,b);a.width=a.get(a.W);a.height=a.get(a.H);var b=a.push("centerx",a.x+a.width/2),e=a.push("centery",a.y+a.height/2),f=a.C,g="middle",d=a.get("value_space");c==a.L?(f=a.R,b=a.x-d):c==a.R?(f=a.L,b=a.x+a.width+d):c==a.B?(e=a.y+a.height+d,g=a.O):c==a.O&&(e=a.y-d,g=a.B);a.get("label")&&(a.push("label.originx",b),a.push("label.originy",e),a.push("label.text",a.push("value",a.fireString(a,"parseText",[a,a.get("value")],a.get("value")))),iChart.applyIf(a.get("label"),{textAlign:f,textBaseline:g,color:a.get("color")}),a.label=new iChart.Text(a.get("label"),a));a.get("tip.enable")&&("follow"!=a.get("tip.showType")&&a.push("tip.invokeOffsetDynamic",!1),a.tip=new iChart.Tip(a.get("tip"),a))}}); -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.resizable.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Resizable 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Resizable#theming 9 | */ 10 | .ui-resizable { position: relative;} 11 | .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; } 12 | .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 13 | .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } 14 | .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } 15 | .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } 16 | .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } 17 | .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 18 | .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 19 | .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 20 | .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.slider.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Slider 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Slider#theming 9 | */ 10 | .ui-slider { position: relative; text-align: left; } 11 | .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } 12 | .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 13 | 14 | .ui-slider-horizontal { height: .8em; } 15 | .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } 16 | .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 17 | .ui-slider-horizontal .ui-slider-range-min { left: 0; } 18 | .ui-slider-horizontal .ui-slider-range-max { right: 0; } 19 | 20 | .ui-slider-vertical { width: .8em; height: 100px; } 21 | .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } 22 | .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } 23 | .ui-slider-vertical .ui-slider-range-min { bottom: 0; } 24 | .ui-slider-vertical .ui-slider-range-max { top: 0; } -------------------------------------------------------------------------------- /src/ichart.barmulti2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview this component will draw a cluster bar2d chart. 3 | * @component#@chart#iChart.BarMulti2D 4 | * @extend#iChart.Bar 5 | */ 6 | iChart.BarMulti2D = iChart.extend(iChart.Bar, { 7 | /** 8 | * initialize the context for the BarMulti2D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.BarMulti2D.superclass.configure.call(this); 15 | 16 | this.type = 'barmulti2d'; 17 | this.dataType = 'complex'; 18 | 19 | this.set({ 20 | /** 21 | * @cfg {Array} the array of labels close to the axis 22 | */ 23 | labels : [] 24 | }); 25 | }, 26 | doEngine:function(_,bh,s,S,So,W,h2,gw,x,y,x0){ 27 | iChart.each(_.columns,function(c, i) { 28 | iChart.each(c.item,function(d, j) { 29 | _.rect(_,d, i + '_' + j,x,y + j * bh + i * gw,W,S,So); 30 | }, _); 31 | _.doLabel(_,i, c.name, x0, y - s * 0.5 + (i + 0.5) * gw); 32 | }, _); 33 | }, 34 | doConfig : function() { 35 | iChart.BarMulti2D.superclass.doConfig.call(this); 36 | /** 37 | * start up engine 38 | */ 39 | this.engine(this); 40 | } 41 | }); 42 | iChart.register('BarMulti2D'); 43 | /** 44 | * @end 45 | */ 46 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.resizable.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Resizable 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Resizable#theming 9 | */ 10 | .ui-resizable { position: relative;} 11 | .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; } 12 | .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 13 | .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } 14 | .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } 15 | .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } 16 | .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } 17 | .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 18 | .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 19 | .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 20 | .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.slider.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Slider 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Slider#theming 9 | */ 10 | .ui-slider { position: relative; text-align: left; } 11 | .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } 12 | .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 13 | 14 | .ui-slider-horizontal { height: .8em; } 15 | .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } 16 | .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 17 | .ui-slider-horizontal .ui-slider-range-min { left: 0; } 18 | .ui-slider-horizontal .ui-slider-range-max { right: 0; } 19 | 20 | .ui-slider-vertical { width: .8em; height: 100px; } 21 | .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } 22 | .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } 23 | .ui-slider-vertical .ui-slider-range-min { bottom: 0; } 24 | .ui-slider-vertical .ui-slider-range-max { top: 0; } -------------------------------------------------------------------------------- /src/ichart.columnmulti2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview this component will draw a cluster column2d chart. 3 | * @component#@chart#iChart.ColumnMulti2D 4 | * @extend#iChart.Column 5 | */ 6 | iChart.ColumnMulti2D = iChart.extend(iChart.Column, { 7 | /** 8 | * initialize the context for the ColumnMulti2D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.ColumnMulti2D.superclass.configure.call(this); 15 | 16 | this.type = 'columnmulti2d'; 17 | this.dataType = 'complex'; 18 | 19 | this.set({ 20 | /** 21 | * @cfg {Array} the array of labels close to the axis 22 | */ 23 | labels : [] 24 | }); 25 | 26 | }, 27 | doEngine:function(_,cw,s,S,So,H,w2,q,gw,x,y,y0){ 28 | iChart.each(_.columns,function(c, i) { 29 | iChart.each(c.item,function(d, j) { 30 | _.rect(_,d, i + '_' + j,x + j * (cw + q) + i * gw,y,H,S,So); 31 | }, _); 32 | 33 | _.doLabel(_, i, c.name, x - s * 0.5 + (i + 0.5) * gw, y0); 34 | }, _); 35 | }, 36 | doConfig : function() { 37 | iChart.ColumnMulti2D.superclass.doConfig.call(this); 38 | 39 | /** 40 | * start up engine 41 | */ 42 | this.engine(this); 43 | } 44 | }); 45 | iChart.register('ColumnMulti2D'); 46 | /** 47 | * @end 48 | */ 49 | -------------------------------------------------------------------------------- /test/data.js: -------------------------------------------------------------------------------- 1 | var data = [ 2 | {name : '广州',value : 4000,color:'#a56f8f'}, 3 | {name : '上海',value : 4200,color:'#0d6868'}, 4 | {name : '南昌',value : 3500,color:'#744774'}, 5 | {name : '哈尔滨',value : 3600,color:'#267daa'}, 6 | {name : '北京',value : 4150,color:'#67840e'} 7 | ]; 8 | 9 | var data2 = [ 10 | { 11 | name : 'DPS01A', 12 | value:[45,52,54,74,90,84], 13 | color:'#1f7e92', 14 | linewidth:1 15 | }, 16 | { 17 | name : 'DPS01B', 18 | value:[60,80,105,125,108,120], 19 | color:'#2b7f39', 20 | linewidth:1 21 | } 22 | ]; 23 | 24 | var data3 = [ 25 | { 26 | name : '北京', 27 | value:[8,12,14,20,26,28,30,26,28,20,16,10], 28 | color:'#1f7e92' 29 | } 30 | ]; 31 | var data4 = [ 32 | { 33 | name : '北京', 34 | value:[8,12,14,20,26,28,30,26,28,20,16,10], 35 | color:'#1f7e92' 36 | }, 37 | { 38 | name : '上海', 39 | value:[9,13,18,24,27,32,33,29,28,22,17,11], 40 | color:'#1f7e92' 41 | } 42 | ]; 43 | 44 | var lineLabels = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; 45 | 46 | var labels = ["一月","二月","三月","四月","五月","六月"]; -------------------------------------------------------------------------------- /minify/ichart.component.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Component=iChart.extend(iChart.Painter,{configure:function(a){iChart.Component.superclass.configure.apply(this,arguments);this.type="component";this.set({fontsize:12,font:"Verdana",fontweight:"normal",fontunit:"px",tip:{enable:!1,border:{width:2}}});this.ICHARTJS_CHART=this.proxy=this.atomic=!1;this.inject(a)},initialize:function(){iChart.DefineAbstract("isEventValid",this);iChart.DefineAbstract("doDraw",this);this.doConfig();this.initialization=!0},getDimension:function(){return{x:this.x,y:this.y,width:this.get("width"),height:this.get("height")}},destroy:function(){this.tip&&this.tip.destroy()},doConfig:function(){iChart.Component.superclass.doConfig.call(this);var a=this._(),b=a.get(a.W),c=a.get("maxwidth"),d=a.get(a.X);if(b&&c&&(b=a.push(a.W,iChart.parsePercent(b,c)),b>c&&(b=a.push("width",c)),c>b)){var e=a.get("align")||a.C;e==a.C?d+=(c-b)/2:e==a.R&&(d+=c-b)}a.x=a.push(a.X,d+a.get("offsetx"));a.y=a.push(a.Y,a.get(a.Y)+a.get("offsety"));a.push("fontStyle",iChart.getFont(a.get("fontweight"),a.get("fontsize"),a.get("font"),a.get("fontunit")));a.data=a.get("data");a.get("tip.enable")&&(a.pushIf("tip.border.color",a.get("f_color")),iChart.isFunction(a.get("tip.invokeOffset"))||a.push("tip.invokeOffset",a.tipInvoke()))},isMouseOver:function(a){return this.isEventValid(a,this)},redraw:function(a){this.root.draw(a,this.root.Combination)},last:iChart.emptyFn,commonDraw:function(a){a.proxy||a.doDraw.call(a,a)}}); -------------------------------------------------------------------------------- /src/ichart.column3d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the column3d componment 3 | * @component#@chart#iChart.Column3D 4 | * @extend#iChart.Column2D 5 | */ 6 | iChart.Column3D = iChart.extend(iChart.Column2D, { 7 | /** 8 | * initialize the context for the Column3D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.Column3D.superclass.configure.call(this); 15 | 16 | this.type = 'column3d'; 17 | this.dimension = iChart._3D; 18 | 19 | this.set({ 20 | /** 21 | * @cfg {iChart.Coordinate3D} the option for coordinate. 22 | */ 23 | coordinate : {}, 24 | /** 25 | * @cfg {Number(0~90)} Three-dimensional rotation X in degree(angle).(default to 60) 26 | */ 27 | xAngle : 60, 28 | /** 29 | * @cfg {Number(0~90)} Three-dimensional rotation Y in degree(angle).(default to 20) 30 | */ 31 | yAngle : 20, 32 | /** 33 | * @cfg {Number} Three-dimensional z-axis deep factor.frame of reference is width.(default to 1) 34 | */ 35 | zScale : 1, 36 | /** 37 | * @cfg {Number(1~)} Three-dimensional z-axis deep factor of pedestal.frame of reference is width.(default to 1.4) 38 | */ 39 | bottom_scale : 1.4 40 | }); 41 | }, 42 | doConfig : function() { 43 | iChart.Column3D.superclass.doConfig.call(this); 44 | } 45 | }); 46 | iChart.register('Column3D'); 47 | /** 48 | *@end 49 | */ 50 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.dialog.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Dialog 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Dialog#theming 9 | */ 10 | .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } 11 | .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } 12 | .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 13 | .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } 14 | .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } 15 | .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } 16 | .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } 17 | .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } 18 | .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } 19 | .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } 20 | .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } 21 | .ui-draggable .ui-dialog-titlebar { cursor: move; } 22 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.tabs.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Tabs 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Tabs#theming 9 | */ 10 | .ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ 11 | .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } 12 | .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } 13 | .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } 14 | .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } 15 | .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } 16 | .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ 17 | .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } 18 | .ui-tabs .ui-tabs-hide { display: none !important; } 19 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.dialog.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Dialog 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Dialog#theming 9 | */ 10 | .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } 11 | .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } 12 | .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 13 | .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } 14 | .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } 15 | .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } 16 | .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } 17 | .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } 18 | .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } 19 | .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } 20 | .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } 21 | .ui-draggable .ui-dialog-titlebar { cursor: move; } 22 | -------------------------------------------------------------------------------- /src/ichart.columnmulti3d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview this component will draw a cluster column3d chart. 3 | * @component#@chart#iChart.ColumnMulti3D 4 | * @extend#iChart.ColumnMulti2D 5 | */ 6 | iChart.ColumnMulti3D = iChart.extend(iChart.ColumnMulti2D, { 7 | /** 8 | * initialize the context for the ColumnMulti3D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.ColumnMulti3D.superclass.configure.call(this); 15 | 16 | this.type = 'columnmulti3d'; 17 | this.dataType = 'complex'; 18 | this.dimension = iChart._3D; 19 | 20 | this.set({ 21 | /** 22 | * @cfg {Number(0~90)} Three-dimensional rotation X in degree(angle).(default to 60) 23 | */ 24 | xAngle : 60, 25 | /** 26 | * @cfg {Number(0~90)} Three-dimensional rotation Y in degree(angle).(default to 20) 27 | */ 28 | yAngle : 20, 29 | /** 30 | * @cfg {Number} Three-dimensional z-axis deep factor.frame of reference is width.(default to 1) 31 | */ 32 | zScale : 1, 33 | group_fator : 0.3, 34 | /** 35 | * @cfg {Number(1~)} Three-dimensional z-axis deep factor of pedestal.frame of reference is width.(default to 1.4) 36 | */ 37 | bottom_scale : 1.4 38 | }); 39 | }, 40 | doConfig : function() { 41 | iChart.ColumnMulti3D.superclass.doConfig.call(this); 42 | 43 | 44 | } 45 | }); 46 | iChart.register('ColumnMulti3D'); 47 | /** 48 | * @end 49 | */ 50 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.tabs.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Tabs 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Tabs#theming 9 | */ 10 | .ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ 11 | .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } 12 | .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } 13 | .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } 14 | .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } 15 | .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } 16 | .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ 17 | .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } 18 | .ui-tabs .ui-tabs-hide { display: none !important; } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ichartjs Library, workspace for version 1.2.1 development 2 | =========================================================================== 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | -------------------------------------------------- 5 | http://www.ichartjs.com 6 | -------------------------------------------------- 7 | The branch master is develop branch. 8 | The latest release version for use is : https://github.com/wanghetommy/ichartjs/tree/ichartjs1.2 9 | -------------------------------------------------- 10 | Directory INFO 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 39 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | 51 | 52 | 53 |
directorydescription
dist 19 | contains the packed js files 20 |
docs 25 | contains the ichartjs API docs 26 |
minify 31 | contains the minify js files 32 |
samples 37 | contains various demo 38 |
src 43 | contains the general javascript source files for the ichartjs 44 |
test 49 | contains the general javascript source files for test 50 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/base/jquery.ui.core.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI CSS Framework 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming/API 9 | */ 10 | 11 | /* Layout helpers 12 | ----------------------------------*/ 13 | .ui-helper-hidden { display: none; } 14 | .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } 15 | .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } 16 | .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; } 17 | .ui-helper-clearfix:after { clear: both; } 18 | .ui-helper-clearfix { zoom: 1; } 19 | .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } 20 | 21 | 22 | /* Interaction Cues 23 | ----------------------------------*/ 24 | .ui-state-disabled { cursor: default !important; } 25 | 26 | 27 | /* Icons 28 | ----------------------------------*/ 29 | 30 | /* states and images */ 31 | .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 32 | 33 | 34 | /* Misc visuals 35 | ----------------------------------*/ 36 | 37 | /* Overlays */ 38 | .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 39 | -------------------------------------------------------------------------------- /samples/jq-ui/themes/ui-lightness/jquery.ui.core.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI CSS Framework 1.8.21 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming/API 9 | */ 10 | 11 | /* Layout helpers 12 | ----------------------------------*/ 13 | .ui-helper-hidden { display: none; } 14 | .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } 15 | .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } 16 | .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; } 17 | .ui-helper-clearfix:after { clear: both; } 18 | .ui-helper-clearfix { zoom: 1; } 19 | .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } 20 | 21 | 22 | /* Interaction Cues 23 | ----------------------------------*/ 24 | .ui-state-disabled { cursor: default !important; } 25 | 26 | 27 | /* Icons 28 | ----------------------------------*/ 29 | 30 | /* states and images */ 31 | .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 32 | 33 | 34 | /* Misc visuals 35 | ----------------------------------*/ 36 | 37 | /* Overlays */ 38 | .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 39 | -------------------------------------------------------------------------------- /minify/ichart.crosshair.minify.js: -------------------------------------------------------------------------------- 1 | iChart.CrossHair=iChart.extend(iChart.Html,{configure:function(){iChart.CrossHair.superclass.configure.apply(this,arguments);this.type="crosshair";this.set({top:0,left:0,hcross:!0,vcross:!0,invokeOffset:null,line_width:1,line_color:"#1A1A1A",delay:200})},follow:function(a,d,b){b.get("invokeOffset")?(a=b.get("invokeOffset")(a,d))&&a.hit?(b.o_valid=!0,b.position(a.top-b.top,a.left-b.left,b)):(!a||!b.o_valid)&&b.position(b.owidth,b.oheight,b):b.position(a.y-b.top-1,a.x-b.left-1,b)},position:function(a,d,b){b.horizontal.style.top=a-b.size+"px";b.vertical.style.left=d-b.size+"px"},doCreate:function(a,d,b){var c=document.createElement("div");c.style.width=iChart.toPixel(d);c.style.height=iChart.toPixel(b);c.style.backgroundColor=a.get("line_color");c.style.position="absolute";a.dom.appendChild(c);return c},doAction:function(a){a.T.on("mouseover",function(d,b,c){a.show(b,c)}).on("mouseout",function(d,b,c){a.hidden(b,c)}).on("mousemove",function(d,b,c){a.follow(b,c,a)})},initialize:function(){iChart.CrossHair.superclass.initialize.call(this);var a=this._(),d=iChart.toPixel(a.get("line_width"));a.size=a.get("line_width")/2;a.top=iChart.fixPixel(a.get(a.O));a.left=iChart.fixPixel(a.get(a.L));a.owidth=-a.T.root.width;a.oheight=-a.T.root.height;a.o_valid=!1;a.css("width","0px");a.css("height","0px");a.css("top",a.top+"px");a.css("left",a.left+"px");a.css("visibility","hidden");a.horizontal=a.doCreate(a,a.get("hcross")?iChart.toPixel(a.get(a.W)):"0px",d);a.vertical=a.doCreate(a,d,a.get("vcross")?iChart.toPixel(a.get(a.H)):"0px")}}); -------------------------------------------------------------------------------- /samples/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas 6 | 7 | 14 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | ichartjs需求收集与优化建议 2 | =========================================================================== 3 | 1.折线图坐标x轴label显示方案* 4 | 5 | 2.替换扩展了原生对象的函数* 6 | 7 | 3.增加了assign_scale，解决双轴问题，此处最佳解决方案为：左右坐标轴可自定传入需要计算的数据，默认传入主数据。TODO 8 | 9 | 4.3D的折线图的确位置会有一些偏移 10 | 11 | 5.绘制文字实现一种HTML
的方式，方便交互处理 NextTODO 12 | 13 | 6.组件能获取到对应的x轴的坐标文字 14 | 15 | 7.建议把3d显示效果能做好一点 体现ichart的优势 16 | 8.tip超出后，自动隐藏了，不适用于小图的场景 17 | 9.每个html都要有统一的class、方便设置样式 18 | 10.折线图的tip，能否连续显示。显示相应x轴与y轴的信息。 19 | 11.制作一个自定义动画的示例 20 | 12.destroy里加入remove方法，不加参数即为removeAll操作 21 | 13.increment增加一个配置项控制线 22 | 14.小数点坐标运算异常* 23 | 24 | 15.加了scale后，labels应该设置在scale里的bottom里了 remove 25 | 26 | 16.对于折线图，我打算如果传递的“值”，不是数字，或者不能被转化为数字，则与ignore的效果一样，这样就不用ignore了~同18 27 | 17、补中文文档--background_color:null* 28 | 18、折线图、比如六月份那个33不要。直接从5月连到7月 29 | 实现方式、设置1个配置项： 30 | nullToDirect:true表示数据为null时，直接连线,false表示数据为null时，忽略连线.默认为false* 31 | 32 | 20、不均匀刻度-用于值差别比较大的情况* 33 | 34 | 21、1.2.1版本的饼图扇区块分离组合的反应速度明显比1.2版本时慢? 35 | 36 | 22、自适应的功能。自适应渲染的div即可* 37 | 38 | 23、Pie看来有必要新增一个api。move(x,y) 39 | 40 | 24、1.2.1 resize有问题?* 41 | 42 | 25、折线图中上行、下行的颜色能否设置为不同* 43 | 26、组合图load后。tip会不出现 44 | 27、scale_share:3不起作用。老版本ok-remove* 45 | 28、有一个配置项说明labels和数据的比例关系折线图** 46 | 29、数据本身支持隐藏操作-先折线图? 47 | 30、支持cache 48 | 31、area_color支持数组颜色 49 | 32、use jsdoc http://usejsdoc.org/ 50 | 33、折线图的2维坐标实现 51 | 33、柱形图太小点击不到。需要放大处理?**非线形坐标 -------------------------------------------------------------------------------- /src/ichart.custom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the customize componment 3 | * @component#iChart.Custom 4 | * @extend#iChart.Component 5 | */ 6 | iChart.Custom = iChart.extend(iChart.Component,{ 7 | configure:function(){ 8 | /** 9 | * invoked the super class's configuration 10 | */ 11 | iChart.Custom.superclass.configure.apply(this,arguments); 12 | 13 | /** 14 | * indicate the component's type 15 | */ 16 | this.type = 'custom'; 17 | 18 | this.set({ 19 | /** 20 | * @cfg {Function} Specifies the customize function.(default to emptyFn) 21 | */ 22 | drawFn:iChart.emptyFn, 23 | configFn:iChart.emptyFn, 24 | /** 25 | * @cfg {Function} Specifies the customize event valid function.(default to undefined) 26 | */ 27 | eventValid:undefined, 28 | /** 29 | * @cfg {Boolean} If true when chart animating it also invoke darw.(default to true) 30 | */ 31 | animating_draw:true 32 | }); 33 | }, 34 | doDraw:function(_){ 35 | _.get('drawFn').call(_,_); 36 | }, 37 | isEventValid:function(e,_){ 38 | if(iChart.isFunction(this.get('eventValid'))) 39 | return this.get('eventValid').call(this,e,_); 40 | return {valid:false}; 41 | }, 42 | doConfig:function(){ 43 | iChart.Custom.superclass.doConfig.call(this); 44 | var _ = this._(); 45 | _.A_draw = _.get('animating_draw'); 46 | _.variable.animation = { 47 | animating:false, 48 | time : 0 49 | }; 50 | _.duration = 0; 51 | _.get('configFn').call(_,_); 52 | } 53 | }); 54 | /** 55 | * @end 56 | */ -------------------------------------------------------------------------------- /src/ichart.columnstacked2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the stacked column2d componment 3 | * @component#@chart#iChart.ColumnStacked2D 4 | * @extend#iChart.Column 5 | */ 6 | iChart.ColumnStacked2D = iChart.extend(iChart.Column, { 7 | /** 8 | * initialize the context for the ColumnStacked2D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.ColumnStacked2D.superclass.configure.call(this); 15 | 16 | this.type = 'columnstacked2d'; 17 | /** 18 | * indicate the data structure 19 | */ 20 | this.dataType = 'stacked'; 21 | 22 | this.set({ 23 | /** 24 | * @cfg {Boolean} Specifies as true to display with percent.(default to false) 25 | */ 26 | percent : false, 27 | /** 28 | * @cfg {Array} the array of labels close to the axis 29 | */ 30 | labels : [], 31 | sub_option:{ 32 | label:{color:'#ffffff'}, 33 | valueAlign:'middle' 34 | } 35 | }); 36 | 37 | }, 38 | doEngine:function(_,cw,s,S,So,H,w2,q,gw,x,y,y0){ 39 | var h; 40 | iChart.each(_.columns,function(c, i) { 41 | h = 0; 42 | iChart.each(c.item,function(d, j) { 43 | d.total = c.total; 44 | h += _.rect(_,d, i + '_' + j,x + i * gw,y - h,H,S,So); 45 | }, _); 46 | _.doLabel(_, i, c.name, x - s * 0.5 + (i + 0.5) * gw, y0); 47 | }, _); 48 | }, 49 | doConfig : function() { 50 | iChart.ColumnStacked2D.superclass.doConfig.call(this); 51 | /** 52 | * start up engine 53 | */ 54 | this.engine(this); 55 | } 56 | }); 57 | iChart.register('ColumnStacked2D'); 58 | /** 59 | *@end 60 | */ -------------------------------------------------------------------------------- /samples/notsupport.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 提示 6 | 8 | 10 | 24 | 25 | 26 |
抱歉,您的浏览器不支持HTML5的canvas标签,您可以选择安装以下浏览器进行预览：
27 |
28 |
Google Chrome
29 |
Mozilla Firefox
30 |
Maxthon
31 |
32 |
33 |
Sorry,Your browser does not support the canvas element,you can choose the following browsers to install：
34 |
35 |
Google Chrome
36 |
Mozilla Firefox
37 |
Maxthon
38 | 39 | 40 | -------------------------------------------------------------------------------- /src/ichart.barstacked2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the stacked bar2d componment 3 | * @component#@chart#iChart.BarStacked2D 4 | * @extend#iChart.Bar 5 | */ 6 | iChart.BarStacked2D = iChart.extend(iChart.Bar, { 7 | /** 8 | * initialize the context for the BarStacked2D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.BarStacked2D.superclass.configure.call(this); 15 | 16 | this.type = 'barstacked2d'; 17 | /** 18 | * indicate the data structure 19 | */ 20 | this.dataType = 'stacked'; 21 | 22 | this.set({ 23 | /** 24 | * @cfg {Boolean} Specifies as true to display with percent.(default to false) 25 | */ 26 | percent : false, 27 | /** 28 | * @cfg {Array} the array of labels close to the axis 29 | */ 30 | labels : [], 31 | sub_option:{ 32 | label:{color:'#ffffff'}, 33 | valueAlign:'middle' 34 | } 35 | }); 36 | 37 | }, 38 | doEngine:function(_,bh,s,S,So,W,h2,gw,x,y,x0){ 39 | var w; 40 | iChart.each(_.columns,function(c, i) { 41 | w = 0; 42 | iChart.each(c.item,function(d, j) { 43 | d.total = c.total; 44 | w +=_.rect(_, d, i + '_' + j, x + w, y + i * gw, W, S, So); 45 | }, _); 46 | _.doLabel(_, i, c.name, x0, y - s * 0.5 + (i + 0.5) * gw); 47 | }, _); 48 | }, 49 | doConfig : function() { 50 | iChart.BarStacked2D.superclass.doConfig.call(this); 51 | 52 | this.push('sub_option.valueAlign', this.C); 53 | /** 54 | * start up engine 55 | */ 56 | this.engine(this); 57 | } 58 | }); 59 | iChart.register('BarStacked2D'); 60 | /** 61 | *@end 62 | */ -------------------------------------------------------------------------------- /minify/ichart.sector3d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Sector3D=iChart.extend(iChart.Sector,{configure:function(){iChart.Sector3D.superclass.configure.apply(this,arguments);this.type="sector3d";this.dimension=iChart._3D;this.set({semi_major_axis:0,semi_minor_axis:0,cylinder_height:0});this.proxy=!0},isEventValid:function(a,c){if(!c.get("ignored")){if(c.isLabel()&&c.label.isEventValid(a,c.label).valid)return{valid:!0};if(!iChart.inEllipse(a.x-c.x,a.y-c.y,c.a,c.b))return{valid:!1};if(iChart.angleZInRange(c.sA,c.eA,iChart.atan2Radian(c.x,c.y,a.x,a.y)))return{valid:!0}}return{valid:!1}},p2p:function(a,c,b,e){return{x:a+this.a*Math.cos(b)*e,y:c+this.b*Math.sin(b)*e}},tipInvoke:function(){var a=this,c=a.get("middleAngle"),b=iChart.quadrantd(c);return function(e,f){var d=a.p2p(a.x,a.y,c,0.6);return{left:2<=b&&3>=b?d.x-e:d.x,top:3<=b?d.y-f:d.y}}},doConfig:function(){iChart.Sector3D.superclass.doConfig.call(this);var a=this._(),c=a.get("counterclockwise"),b=a.get("middleAngle");a.a=a.get("semi_major_axis");a.b=a.get("semi_minor_axis");a.h=a.get("cylinder_height");iChart.Assert.isTrue(0<=a.a*a.b,"major&minor");var e=2*Math.PI,f=function(b){for(;0>b;)b+=e;return Math.abs(iChart.atan2Radian(0,0,a.a*Math.cos(b),c?-a.b*Math.sin(b):a.b*Math.sin(b)))},d=a.pushIf("increment",iChart.lowTo(5,a.a/10));a.sA=f.call(a,a.get("startAngle"));a.eA=f.call(a,a.get("endAngle"));a.mA=f.call(a,b);a.push("inc_x",d*Math.cos(e-a.mA));a.push("inc_y",d*Math.sin(e-a.mA));d*=2;if(a.get("label"))if(a.get("mini_label"))d=a.p2p(a.x,a.y,b,0.5),a.doText(a,d.x,d.y);else{var f=iChart.quadrantd(b),g=a.p2p(a.x,a.y,b,d/a.a+1),h=a.p2p(a.x,a.y,b,0.6*d/a.a+1),b=a.p2p(a.x,a.y,b,1);a.doLabel(a,b.x,b.y,f,[{x:b.x,y:b.y},{x:h.x,y:h.y},{x:g.x,y:g.y}],g.x,g.y,0.4*d)}}}); -------------------------------------------------------------------------------- /minify/ichart.sector2d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Sector2D=iChart.extend(iChart.Sector,{configure:function(){iChart.Sector2D.superclass.configure.apply(this,arguments);this.type="sector2d";this.set({radius:0})},drawSector:function(){this.T.sector(this.x,this.y,this.r,this.get("donutwidth"),this.get("startAngle"),this.get("endAngle"),this.get("f_color"),this.get("border.enable"),this.get("border.width"),this.get("border.color"),this.get("shadow"),this.get("counterclockwise"))},isEventValid:function(a,b){if(!b.get("ignored")){if(b.isLabel()&&b.label.isEventValid(a,b.label).valid)return{valid:!0};var c=iChart.distanceP2P(b.x,b.y,a.x,a.y),e=b.get("donutwidth");if(b.rc)return{valid:!1};if(iChart.angleInRange(b.get("startAngle"),b.get("endAngle"),iChart.atan2Radian(b.x,b.y,a.x,a.y)))return{valid:!0}}return{valid:!1}},tipInvoke:function(){var a=this,b=a.get("middleAngle"),c=iChart.quadrantd(b);return function(e,f){var d=iChart.p2Point(a.x,a.y,b,0.8*a.r);return{left:1<=c&&2>=c?d.x-e:d.x,top:2<=c?d.y-f:d.y}}},doConfig:function(){iChart.Sector2D.superclass.doConfig.call(this);var a=this._();a.r=a.get("radius");a.get("donutwidth")>a.r&&a.push("donutwidth",0);a.applyGradient(a.x-a.r,a.y-a.r,1.8*a.r,1.8*a.r);var b=a.get("middleAngle"),c=a.pushIf("increment",iChart.lowTo(5,a.r/10));a.push("inc_x",c*Math.cos(2*Math.PI-b));a.push("inc_y",c*Math.sin(2*Math.PI-b));c*=2;if(a.get("label"))if(a.get("mini_label"))P2=iChart.p2Point(a.x,a.y,b,a.get("donutwidth")?a.r-a.get("donutwidth")/2:5*a.r/8),a.doText(a,P2.x,P2.y);else{var e=iChart.quadrantd(b),f=iChart.p2Point(a.x,a.y,b,a.r+c),d=iChart.p2Point(a.x,a.y,b,a.r+0.6*c);P2=iChart.p2Point(a.x,a.y,b,a.r);a.doLabel(a,P2.x,P2.y,e,[{x:P2.x,y:P2.y},{x:d.x,y:d.y},{x:f.x,y:f.y}],f.x,f.y,0.4*c)}}}); -------------------------------------------------------------------------------- /samples/css/demo.css: -------------------------------------------------------------------------------- 1 | @CHARSET "utf-8"; 2 | body { 3 | padding:0px; 4 | margin:0px; 5 | margin-top:10px; 6 | text-align: left; 7 | font-family:'微软雅黑',Trebuchet MS,Verdana,Helvetica,Arial,sans-serif; 8 | } 9 | .ichartjs_btn{ 10 | padding:2px 5px; 11 | line-height:25px; 12 | color:#0b2946; 13 | cursor: pointer; 14 | text-align:center; 15 | font-size:12px; 16 | border:1px solid #98adc1; 17 | -webkit-box-shadow:0px 0px 2px #375073; 18 | -moz-box-shadow:0px 0px 2px #375073; 19 | box-shadow:0px 0px 2px #375073; 20 | -moz-border-radius:5px; 21 | -webkit-border-radius:5px; 22 | -khtml-border-radius:5px; 23 | border-radius:5px 24 | } 25 | .ichartjs_author{ 26 | position: absolute; 27 | font-size:12px; 28 | right: 20px; 29 | top: 0px; 30 | } 31 | .ichartjs_author a{ 32 | color:#113659; 33 | } 34 | 35 | .ichartjs_info{ 36 | position:relative; 37 | margin:10px; 38 | padding:5px; 39 | color:#1b4267; 40 | } 41 | .ichartjs_sm{ 42 | margin:10px 0px; 43 | font-size: 13px; 44 | font-weight: 600; 45 | } 46 | .ichartjs_details{ 47 | padding:0px; 48 | text-indent:2em; 49 | font-size: 12px; 50 | line-height:20px; 51 | } 52 | #ichartjs_code{ 53 | display:none; 54 | } 55 | #ichartjs_result{ 56 | position: absolute; 57 | left: 20px; 58 | bottom: 20px; 59 | padding:8px; 60 | color:#fefefe; 61 | font-size:20px; 62 | font-weight:600; 63 | background-color:#6d869f; 64 | cursor: pointer; 65 | text-align:center; 66 | border:1px solid #6a869d; 67 | -webkit-box-shadow:0px 0px 2px #375073; 68 | -moz-box-shadow:0px 0px 2px #375073; 69 | box-shadow:0px 0px 2px #375073; 70 | -moz-border-radius:10px; 71 | -webkit-border-radius:10px; 72 | -khtml-border-radius:10px; 73 | border-radius:10px 74 | } -------------------------------------------------------------------------------- /minify/ichart.bar.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Bar=iChart.extend(iChart.Chart,{configure:function(){iChart.Bar.superclass.configure.call(this);this.type="bar";this.set({coordinate:{striped_direction:"h"},bar_height:void 0,bar_space:void 0,text_space:6,scaleAlign:"bottom",sub_option:{},label:{}})},getCoordinate:function(){return this.coo},doLabel:function(a,b,c,d,e){a.labels.push(new iChart.Text(iChart.apply(a.get("label"),{id:b,text:c,textAlign:"right",textBaseline:"middle",originx:d,originy:e}),a))},doParse:function(a,b,c,d){a.doActing(a,b,d,c)},engine:function(a){var b=a.get("bar_height"),c=a.get("bar_space"),d=a.coo.getScale(a.get("scaleAlign")),e=a.coo.valid_width,f=b/2,g="complex"!=a.dataType?b+c:a.data.length*b+c,h=a.coo.get("x_start")+d.basic*e,i=a.coo.get(a.X)-a.get("text_space")-a.coo.get("axis.width")[3],j=a.coo.get("y_start")+c;a.doEngine(a,b,c,d,e,f,g,h,i,j)},doAnimation:function(a,b,c){c.labels.each(function(a){a.draw()});c.rectangles.each(function(d){d.push(c.W,Math.ceil(c.animationArithmetic(a,0,d.width,b)));d.drawRectangle()})},doConfig:function(){iChart.Bar.superclass.doConfig.call(this);var a=this._();a.rectangles=[];a.labels=[];a.rectangles.zIndex=a.get("z_index");a.labels.zIndex=a.get("z_index")+1;a.components.push(a.labels);a.components.push(a.rectangles);a.coo=iChart.Coordinate.coordinate_.call(a,function(){var b=a.data.length,c=a.get("coordinate.valid_height_value"),d,e,f;"complex"==a.dataType?(f=a.get("labels").length,b=f*b+(a.is3D()?(b-1)*f*a.get("group_fator"):0),d=Math.floor(c/(f+1+b)),e=a.pushIf("bar_height",d),f+=1):("stacked"==a.dataType&&(b=a.get("labels").length),d=Math.floor(2*c/(3*b+1)),e=a.pushIf("bar_height",d),f=b+1);e*b>c&&(e=a.push("bar_height",d));a.push("bar_space",(c-e*b)/f)});a.push("sub_option.height",a.get("bar_height"));a.push("sub_option.valueAlign",a.R);a.push("sub_option.tipAlign",a.R)}}); -------------------------------------------------------------------------------- /src/ichart.columnstacked3d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the stacked column2d componment 3 | * @component#@chart#iChart.ColumnStacked3D 4 | * @extend#iChart.ColumnStacked2D 5 | */ 6 | iChart.ColumnStacked3D = iChart.extend(iChart.ColumnStacked2D, { 7 | /** 8 | * initialize the context for the ColumnStacked2D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.ColumnStacked3D.superclass.configure.call(this); 15 | 16 | this.type = 'columnstacked3d'; 17 | /** 18 | * indicate the data structure 19 | */ 20 | this.dataType = 'stacked'; 21 | 22 | this.dimension = iChart._3D; 23 | 24 | this.set({ 25 | /** 26 | * @cfg {Boolean} Specifies as true to display with percent.(default to false) 27 | */ 28 | percent : false, 29 | sub_option:{ 30 | label:{color:'#ffffff'}, 31 | valueAlign:'middle' 32 | }, 33 | /** 34 | * @cfg {iChart.Coordinate3D} the option for coordinate. 35 | */ 36 | coordinate : {}, 37 | /** 38 | * @cfg {Number(0~90)} Three-dimensional rotation X in degree(angle).(default to 60) 39 | */ 40 | xAngle : 60, 41 | /** 42 | * @cfg {Number(0~90)} Three-dimensional rotation Y in degree(angle).(default to 20) 43 | */ 44 | yAngle : 20, 45 | /** 46 | * @cfg {Number} Three-dimensional z-axis deep factor.frame of reference is width.(default to 1) 47 | */ 48 | zScale : 1, 49 | /** 50 | * @cfg {Number(1~)} Three-dimensional z-axis deep factor of pedestal.frame of reference is width.(default to 1.4) 51 | */ 52 | bottom_scale : 1.4 53 | }); 54 | 55 | 56 | }, 57 | doConfig : function() { 58 | iChart.ColumnStacked3D.superclass.doConfig.call(this); 59 | } 60 | }); 61 | iChart.register('ColumnStacked3D'); 62 | /** 63 | *@end 64 | */ -------------------------------------------------------------------------------- /minify/ichart.tip.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Tip=iChart.extend(iChart.Html,{configure:function(){iChart.Tip.superclass.configure.apply(this,arguments);this.type="tip";this.set({name:"",index:0,value:"",text:"",showType:"follow",invokeOffset:null,fade_duration:300,move_duration:100,timing_function:"ease-out",invokeOffsetDynamic:!1,style:"textAlign:left;padding:4px 5px;cursor:pointer;backgroundColor:rgba(239,239,239,.85);fontSize:12px;color:black;",border:{enable:!0,radius:5},delay:200});this.registerEvent("parseText")},position:function(a,c,b){b.style.top=(0>a?0:a)+"px";b.style.left=(0>c?0:c)+"px"},follow:function(a,c,b){b.get("invokeOffsetDynamic")?c.hit&&((iChart.isString(c.text)||iChart.isNumber(c.text))&&b.text(c.name,c.value,c.text,c.i,b),a=b.get("invokeOffset")(b.width(),b.height(),c),b.position(a.top,a.left,b)):"follow"!=b.get("showType")&&iChart.isFunction(b.get("invokeOffset"))?(a=b.get("invokeOffset")(b.width(),b.height(),c),b.position(a.top,a.left,b)):b.position(a.y-1.1*b.height()-2,a.x+2,b)},text:function(a,c,b,d,e){e.dom.innerHTML=e.fireString(e,"parseText",[e,a,c,b,d],b)},hidden:function(){this.get("animation")?this.css("opacity",0):this.css("visibility","hidden")},doAction:function(a){a.T.on("mouseover",function(c,b,d){a.show(b,d)}).on("mouseout",function(c,b){a.hidden(b)});if("follow"==a.get("showType"))a.T.on("mousemove",function(c,b,d){a.T.variable.event.mouseover&&setTimeout(function(){a.T.variable.event.mouseover&&a.follow(b,d,a)},a.get("delay"))})},initialize:function(){iChart.Tip.superclass.initialize.call(this);var a=this._();a.text(a.get("name"),a.get("value"),a.get("text"),a.get("index"),a);a.hidden();if(a.get("animation")){var c=a.get("move_duration")/1E3+"s "+a.get("timing_function")+" 0s";a.transition("opacity "+a.get("fade_duration")/1E3+"s "+a.get("timing_function")+" 0s");a.transition("top "+c);a.transition("left "+c);a.onTransitionEnd(function(){0==a.css("opacity")&&a.css("visibility","hidden")},!1)}}}); -------------------------------------------------------------------------------- /minify/ichart.html.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Html=iChart.extend(iChart.Element,{configure:function(a){this.type="html";this.T=a;iChart.DefineAbstract("beforeshow",this);this.set({animation:!0,default_action:!0,width:0,height:0,style:"",index:999,offset_top:0,offset_left:0});this.transitions=""},initialize:function(){var a=this._();a.wrap=a.get("wrap");a.dom=document.createElement("div");a.get("shadow")&&a.css("boxShadow",a.get("shadow_offsetx")+"px "+a.get("shadow_offsety")+"px "+a.get("shadow_blur")+"px "+a.get("shadow_color"));a.get("border.enable")&&(a.css("border",a.get("border.width")+"px "+a.get("border.style")+" "+a.get("border.color")),a.css("borderRadius",a.get("border.radius")+"px"));a.css("position","absolute");a.css("zIndex",a.get("index"));a.applyStyle();a.wrap.appendChild(a.dom);a.style=a.dom.style;a.get("default_action")&&a.doAction(a)},width:function(){return this.dom.offsetWidth},height:function(){return this.dom.offsetHeight},onTransitionEnd:function(a,b){var c="transitionend";iChart.isWebKit?c="webkitTransitionEnd":iChart.isOpera&&(c="oTransitionEnd");iChart.Event.addEvent(this.dom,c,a,b)},destroy:function(){this.wrap.removeChild(this.dom);this.dom=null},transition:function(a){this.transitions=""==this.transitions?a:this.transitions+","+a;iChart.isWebKit?this.css("WebkitTransition",this.transitions):iChart.isGecko?this.css("MozTransition",this.transitions):iChart.isOpera?this.css("OTransition",this.transitions):this.css("transition",this.transitions)},beforeshow:function(a,b,c){c.follow(a,b,c)},show:function(a,b){this.beforeshow(a,b,this);this.css("visibility","visible");this.get("animation")&&this.css("opacity",1)},hidden:function(){this.css("visibility","hidden")},getDom:function(){return this.dom},css:function(a,b){if(iChart.isString(a))if(iChart.isDefined(b))this.dom.style[a]=b;else return this.dom.style[a]},applyStyle:function(){for(var a=this.get("style").split(";"),b,c=0;c=b,e=a.get("labelx"),f=a.get("labely");a.labelx=e+(b?-a.get(a.W)-c:c);a.labely=f-a.get(a.H)/2;d[2]={x:e,y:f};d[3]={x:d[2].x+(b?-c:c),y:d[2].y}},doLayout:function(a,b,d,c){c.push("labelx",c.get("labelx")+a/d);c.push("labely",c.get("labely")+b/d);c.get("line_points").each(function(c,d){c.x+=a;c.y+=b;return 1==d},c);c.localizer(c)},doDraw:function(a){var b=a.get("line_points"),d=a.get("sign_size"),c=a.labelx+a.get("padding_left"),e=a.labely+a.get("padding_top");a.T.label(b,a.get("line_thickness"),a.get("border.color"));a.T.box(a.labelx,a.labely,a.get(a.W),a.get(a.H),a.get("border"),a.get("f_color"),!1,a.get("shadow"));a.T.textStyle(a.L,a.O,a.get("fontStyle"));b=a.get("color");a.get("text_with_sign_color")&&(b=a.get("scolor"));"square"==a.get("sign")?a.T.box(c,e,d,d,0,a.get("scolor")):a.get("sign")&&a.T.round(c+d/2,e+d/2,d/2,a.get("scolor"));a.T.fillText(a.get("text"),c+d+a.get("sign_space"),e,a.get("textwidth"),b)},doConfig:function(){iChart.Label.superclass.doConfig.call(this);var a=this._();a.T.textFont(a.get("fontStyle"));a.get("fontsize")>a.get("line_height")&&a.push("line_height",a.get("fontsize"));a.get("sign")||(a.push("sign_size",0),a.push("sign_space",0));a.push(a.H,a.get("line_height")+a.get("vpadding"));a.text();a.localizer(a)}}); -------------------------------------------------------------------------------- /samples/html/area2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 38 | 39 | 40 |
41 |
42 | written by taylor 43 | 预览代码 44 |
说明
45 |
46 | 这是一个面积图示例，该示例展示了北京2012年的平均温度情况。 47 |
48 | 备注： 49 | 50 | 数据均为模拟。 51 | 52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /plugin/ichart.sign.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * ichartjs sign Plugin 3 | * version: 1.0 4 | * @requires ichartjs v1.0 or later 5 | * @site http://www.ichartjs.com/ 6 | * @author wanghe 7 | * @Copyright 2012 8 | * wanghetommy@gmail.com 9 | * Licensed under the Apache License, Version 2.0 (the "License"); 10 | * you may not use this file except in compliance with the License. 11 | * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 12 | */ 13 | ; 14 | (function($) { 15 | //_.T,n,x + s / 2,y,s,color 16 | //[_.T,_.get('sign'),q,ps,g,j] 17 | var sign_fn = function(T, si, Q, size, color) { 18 | var x = Q.x,y = Q.y; 19 | if(si=='bar'){ 20 | T.box(x-size / 2, y - size / 4, size, size / 2, 0, color);return true; 21 | }else if(si=='square'){ 22 | T.box(x-size / 2, y - size/ 2, size, size, 0, color);return true; 23 | }else if(si=='square-hollow'){ 24 | T.box(x-size / 2, y - size/ 2, size, size, 0, color); 25 | T.box(x-size / 4, y - size/ 4, size/2, size/2, 0, this.get('hollow_color')||'#FEFEFE'); 26 | return true; 27 | }else if (si == 'round') { 28 | this.T.round(x, y, size / 2, color); 29 | return true; 30 | }else if (si == 'round-hollow') { 31 | this.T.round(x, y, size*3/8,this.get('hollow_color')||'#FEFEFE',size/4,color); 32 | return true; 33 | } else if (si == 'round-bar') { 34 | this.T.box(x-size/2, y - size / 12, size, size / 6, 0, color); 35 | this.T.round(x, y, size / 3, color); 36 | return true; 37 | } else if (si == 'square-bar') { 38 | this.T.box(x-size/2, y - size / 12, size, size / 6, 0, color); 39 | this.T.box(x - size / 4, y - size / 4, size / 2, size / 2, 0, color);return true; 40 | }else if (si == 'square-bar') { 41 | this.T.box(x-size/2, y - size / 12, size, size / 6, 0, color); 42 | this.T.box(x - size / 4, y - size / 4, size / 2, size / 2, 0, color);return true; 43 | } 44 | 45 | return false; 46 | 47 | } 48 | 49 | $.Legend.plugin('sign', sign_fn); 50 | $.LineSegment.plugin('sign', sign_fn); 51 | 52 | })(iChart); 53 | -------------------------------------------------------------------------------- /samples/html/line2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 37 | 38 | 39 |
40 |
41 | written by taylor 42 | View Code 43 |
说明
44 |
45 | 这是一个基本的线形图示例，示例展示了北京2012年中12个月的平均温度情况。配置上除了像标题、长宽的基本属性外基本上都是默认的。 46 |
47 | 备注： 48 | 49 | 数据均为模拟。 50 | 51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /src/ichart.donut2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview this component use for show a donut chart 3 | * @component#@chart#iChart.Donut2D 4 | * @extend#iChart.Pie 5 | */ 6 | iChart.Donut2D = iChart.extend(iChart.Pie, { 7 | /** 8 | * initialize the context for the pie2d 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.Donut2D.superclass.configure.call(this); 15 | 16 | this.type = 'donut2d'; 17 | 18 | this.set({ 19 | /** 20 | * @cfg {Number} Specifies the width when show a donut.If the value lt 1,It will be as a percentage,value will be radius*donutwidth.only applies when it not 0.(default to 0.3) 21 | */ 22 | donutwidth : 0.3, 23 | /** 24 | * @cfg {Object/String} Specifies the config of Center Text details see iChart.Text,If given a string,it will only apply the text.note:If the text is empty,then will not display 25 | */ 26 | center : { 27 | text:'', 28 | line_height:24, 29 | fontweight : 'bold', 30 | /** 31 | * Specifies the font-size in pixels of center text.(default to 24) 32 | */ 33 | fontsize : 24 34 | } 35 | }); 36 | }, 37 | doConfig : function() { 38 | iChart.Donut2D.superclass.doConfig.call(this); 39 | 40 | var _ = this._(),d='donutwidth',e = _.get(d),r = _.r; 41 | /** 42 | * quick config to all rectangle 43 | */ 44 | _.push('sub_option.radius',r) 45 | if(e>=r){ 46 | e = 0; 47 | }else if(e<1){ 48 | e = Math.floor(r*e); 49 | } 50 | _.push('sub_option.donutwidth',_.push(d,e)); 51 | 52 | _.merge('center'); 53 | 54 | if (_.get('center.text') != '') { 55 | _.push('center.originx',_.get(_.X)); 56 | _.push('center.originy',_.get(_.Y)); 57 | _.push('center.textBaseline','middle'); 58 | _.center = new $.Text(_.get('center'), _); 59 | 60 | _.oneways.push(_.center); 61 | } 62 | 63 | _.parse(_); 64 | } 65 | }); 66 | iChart.register('Donut2D'); 67 | /** 68 | * @end 69 | */ -------------------------------------------------------------------------------- /samples/html/pie2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ichartjs 示例 7 | 8 | 9 | 10 | 11 | 37 | 38 | 39 |
40 |
41 | written by taylor 42 | View Code 43 |
说明
44 |
45 | 这是一个基本的饼状图示例，示例展示了2012年2月份市场浏览器占有的情况。此示例中，配置了默认的图例。并以百分比的形式展示数据值。
46 |
47 | 备注： 48 | 49 | 数据均为模拟。 50 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /docs/en/html/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ichartjs API 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
Charts
12 | Area2D 13 | Bar2D 14 | BarMulti2D 15 | BarStacked2D 16 | Column2D 17 | Column3D 18 | ColumnMulti2D 19 | ColumnMulti3D 20 | ColumnStacked2D 21 | ColumnStacked3D 22 | Donut2D 23 | LineBasic2D 24 | Pie2D 25 | Pie3D 26 |
27 | 28 | -------------------------------------------------------------------------------- /docs/zh/html/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ichartjs API 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
图表类
12 | Area2D 13 | Bar2D 14 | BarMulti2D 15 | BarStacked2D 16 | Column2D 17 | Column3D 18 | ColumnMulti2D 19 | ColumnMulti3D 20 | ColumnStacked2D 21 | ColumnStacked3D 22 | Donut2D 23 | LineBasic2D 24 | Pie2D 25 | Pie3D 26 |
27 | 28 | -------------------------------------------------------------------------------- /src/ichart.rectangle2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the rectangle2d componment 3 | * @component#iChart.Rectangle2D 4 | * @extend#iChart.Rectangle 5 | */ 6 | iChart.Rectangle2D = iChart.extend(iChart.Rectangle,{ 7 | configure:function(){ 8 | /** 9 | * invoked the super class's configuration 10 | */ 11 | iChart.Rectangle2D.superclass.configure.apply(this,arguments); 12 | 13 | /** 14 | * indicate the component's type 15 | */ 16 | this.type = 'rectangle2d'; 17 | 18 | this.set({ 19 | /** 20 | * @cfg {Number} Override the default as -2 21 | */ 22 | shadow_offsety:-2 23 | }); 24 | 25 | }, 26 | drawRectangle:function(){ 27 | var _ = this._(); 28 | _.T.box( 29 | _.get(_.X), 30 | _.get(_.Y), 31 | _.get(_.W), 32 | _.get(_.H), 33 | _.get('border'), 34 | _.get('f_color'), 35 | _.get('shadow')); 36 | }, 37 | isEventValid:function(e,_){ 38 | return {valid:_.get('actived')&&e.x>_.x&&e.x<(_.x+_.width)&&e.y<(_.y+_.height)&&e.y>(_.y)}; 39 | }, 40 | tipInvoke:function(){ 41 | var _ = this._(); 42 | /** 43 | * base on event? 44 | */ 45 | return function(w,h){ 46 | return { 47 | left:_.tipX(w,h), 48 | top:_.tipY(w,h) 49 | } 50 | } 51 | }, 52 | doConfig:function(){ 53 | iChart.Rectangle2D.superclass.doConfig.call(this); 54 | var _ = this._(),tipAlign = _.get('tipAlign'); 55 | if(tipAlign==_.L||tipAlign==_.R){ 56 | _.tipY = function(w,h){return _.get('centery') - h/2;}; 57 | }else{ 58 | _.tipX = function(w,h){return _.get('centerx') -w/2;}; 59 | } 60 | 61 | if(tipAlign==_.L){ 62 | _.tipX = function(w){return _.x - _.get('value_space') -w;}; 63 | }else if(tipAlign==_.R){ 64 | _.tipX = function(w){return _.x + _.width + _.get('value_space');}; 65 | }else if(tipAlign==_.B){ 66 | _.tipY = function(){return _.y +_.height+3;}; 67 | }else{ 68 | _.tipY = function(w,h){return _.y - h -3;}; 69 | } 70 | 71 | _.applyGradient(); 72 | 73 | 74 | } 75 | }); 76 | /** 77 | *@end 78 | */ -------------------------------------------------------------------------------- /minify/ichart.linemonitor2d.minify.js: -------------------------------------------------------------------------------- 1 | (function(){var c=function(a,b){this.T=a;this.line=b;this.direction=a.get("direction");this.size=a.get("queue_size");this.space=a.get("label_spacing");this.end=a.get("line_end")};c.prototype={push:function(a){iChart.isArray(a)||(a=[a]);for("left"==this.direction&&a.reverse();this.sizec&&(d=a.push("column_width",e));a.push("column_space",(c-d*b)/f);a.is3D()&&(a.push("zHeight",a.get("column_width")*a.get("zScale")),a.push("sub_option.zHeight",a.get("zHeight")),a.push("sub_option.xAngle_",a.get("xAngle_")),a.push("sub_option.yAngle_",a.get("yAngle_")))});a.push("sub_option.width",a.get("column_width"))}}); -------------------------------------------------------------------------------- /minify/ichart.painter.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Painter=iChart.extend(iChart.Element,{configure:function(){this.type="painter";this.dimension=iChart._2D;iChart.DefineAbstract("commonDraw",this);iChart.DefineAbstract("initialize",this);this.set({strokeStyle:"gray",padding:10,color:"black",offsetx:0,offsety:0,background_color:"#FEFEFE",color_factor:0.15,style:"",border:{enable:!0},gradient:!1,gradient_mode:"LinearGradientUpDown",z_index:0,listeners:null,originx:null,originy:null});this.variable.event={mouseover:!1};this.variable.animation={};this.registerEvent("click","mousemove","mouseover","mouseout","beforedraw","draw")},is3D:function(){return this.dimension==iChart._3D},applyGradient:function(a,d,c,e){var b=this._();b.get("gradient")&&b.get("f_color")&&(b.push("f_color",b.T.gradient(a||b.x||0,d||b.y||0,c||b.get(b.W),e||b.get(b.H),[b.get("dark_color"),b.get("light_color")],b.get("gradient_mode"))),b.push("light_color",b.T.gradient(a||b.x||0,d||b.y||0,c||b.get(b.W),e||b.get(b.H),[b.get("background_color"),b.get("light_color")],b.get("gradient_mode"))),b.push("f_color_",b.get("f_color")))},draw:function(a,d){if(d)this.root.draw(a);else{if(!this.fireEvent(this,"beforedraw",[this,a]))return this;this.commonDraw(this,a);this.fireEvent(this,"draw",[this,a])}},inject:function(a){a&&(this.root=a,this.target=this.T=a.T)},doConfig:function(){var a=this._(),d=iChart.parsePadding(a.get("padding")),c=a.get("border.enable"),c=c?iChart.parsePadding(a.get("border.width")):[0,0,0,0],e=iChart.toRgb(a.get("background_color")),b=a.get("color_factor"),f=a.get("gradient")?0:null;a.set({border_top:c[0],border_right:c[1],border_bottom:c[2],border_left:c[3],hborder:c[1]+c[3],vborder:c[0]+c[2],padding_top:d[0]+c[0],padding_right:d[1]+c[1],padding_bottom:d[2]+c[2],padding_left:d[3]+c[3],hpadding:d[1]+d[3]+c[1]+c[3],vpadding:d[0]+d[2]+c[0]+c[2]});!0===a.get("shadow")&&a.push("shadow",{color:a.get("shadow_color"),blur:a.get("shadow_blur"),offsetx:a.get("shadow_offsetx"),offsety:a.get("shadow_offsety")});a.push("f_color",e);a.push("f_color_",e);a.push("light_color",iChart.light(e,b,f));a.push("dark_color",iChart.dark(e,0.8*b,f));a.push("light_color2",iChart.light(e,2*b,f));a.is3D()&&!a.get("xAngle_")&&(d=iChart.vectorP2P(a.get("xAngle"),a.get("yAngle")),a.push("xAngle_",d.x),a.push("yAngle_",d.y))}}); -------------------------------------------------------------------------------- /samples/html/bar2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 45 | 46 | 47 |
48 |
49 | written by taylor 50 | View Code 51 |
说明
52 |
53 | 这是一个基本的条形图示例，该示例展示了2012年2月份市场浏览器占有的情况。 54 |
55 | 备注： 56 | 57 | 数据均为模拟。 58 | 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /minify/ichart.pie3d.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Pie3D=iChart.extend(iChart.Pie,{configure:function(){iChart.Pie3D.superclass.configure.apply(this,arguments);this.type="pie3d";this.dimension=iChart._3D;this.set({zRotate:45,yHeight:30});this.positive=!0},doSector:function(b,c){b.push("sub_option.cylinder_height",c.cylinder_height?c.cylinder_height*b.get("zRotate_"):b.get("cylinder_height"));return new iChart[b.sub](b.get("sub_option"),b)},one:function(b){var c,d,i=[],f=b.get("counterclockwise"),h=function(a,b){return 1+Math.sin(b?a+Math.PI:a)},g;lay=function(a,b,d,e){g=iChart.quadrantd(b);(a&&(0==g||3==g)||!a&&(2==g||1==g))&&c.push({g:b,z:b==d,x:e.x,y:e.y,a:e.a,b:e.b,color:iChart.dark(e.get("background_color")),h:e.h,F:e})};b.proxy=new iChart.Custom({z_index:b.get("z_index")+1,drawFn:function(){this.drawSector();i=[];b.sectors.each(function(a){a.get("label")&&(a.expanded?i.push(a.label):a.label.draw())});i.each(function(a){a.draw()})}});b.proxy.drawSector=function(){b.sectors.each(function(a){b.T.ellipse(a.x,a.y+a.h,a.a,a.b,a.get("startAngle"),a.get("endAngle"),0,a.get("border.enable"),a.get("border.width"),a.get("border.color"),a.get("shadow"),f,!0)},b);c=[];d=[];b.sectors.each(function(a){lay(f,a.get("startAngle"),a.get("endAngle"),a);lay(!f,a.get("endAngle"),a.get("startAngle"),a);d=d.concat(iChart.visible(a.get("startAngle"),a.get("endAngle"),a))},b);c.sor(function(a,b){var c=h(a.g)-h(b.g);return 0==c?a.z:0h((a.s+a.e)/2,1)-h((b.s+b.e)/2,1)});d.each(function(a){b.T.sector3D.sPaint.call(b.T,a.f.x,a.f.y,a.f.a,a.f.b,a.s,a.e,f,a.f.h,a.f.get("f_color"))},b);b.sectors.each(function(a){b.T.ellipse(a.x,a.y,a.a,a.b,a.get("startAngle"),a.get("endAngle"),a.get("f_color"),a.get("border.enable"),a.get("border.width"),a.get("border.color"),!1,!1,!0)},b)};b.one=$.emptyFn},doConfig:function(){iChart.Pie3D.superclass.doConfig.call(this);var b=this._(),c=iChart.angle2Radian(b.get("zRotate"));b.push("cylinder_height",b.get("yHeight")*b.push("zRotate_",Math.abs(Math.cos(c))));b.a=b.push("sub_option.semi_major_axis",b.r);b.b=b.push("sub_option.semi_minor_axis",b.r*Math.abs(Math.sin(c)));b.topY=b.push("sub_option.originy",b.get(b.Y)-b.get("yHeight")/2);b.parse(b);b.one(b);b.components.push(b.proxy)}});iChart.register("Pie3D"); -------------------------------------------------------------------------------- /samples/html/column2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 47 | 48 | 49 |
50 |
51 | written by taylor 52 | View Code 53 |
说明
54 |
55 | 这是一个柱形图示例，该示例展示了2012年2月份市场浏览器占有的情况。此示例中，配置了个性化的值轴。并以百分比的形式展示数据值。 56 |
57 | 备注： 58 | 59 | 数据均为模拟。 60 | 61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /samples/html/app_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 78 | 79 | 80 |
81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ichartjs Api 4 | 6 | 7 | 8 | 9 | 10 | 69 | 70 | 71 | 72 | 73 | 74 | 77 | 78 | 79 | 80 | 83 | 84 | 87 | 88 | 89 | 90 |
75 | 76 |
81 |
中文
82 | 		85 |
English
86 |
91 | 92 | -------------------------------------------------------------------------------- /samples/html/bar2d_05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 52 | 53 | 54 |
55 |
56 | written by taylor 57 | View Code 58 |
说明
59 |
60 | 这是一个条形图示例，该示例展示了2012年7月份全球范围内搜索引擎使用的情况。 61 |
62 | 备注： 63 | 64 | 数据来源于StatCounter。 65 | 66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /samples/html/column3d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 55 | 56 | 57 |
58 |
59 | written by taylor 60 | View Code 61 |
说明
62 |
63 | 这是一个3D柱形图示例，该示例展示了2012年2月份市场浏览器占有的情况。此示例中，配置了个性化的值轴。并以百分比的形式展示数据值。 64 |
65 | 备注： 66 | 67 | 数据均为模拟。 68 | 69 |
70 | 71 | -------------------------------------------------------------------------------- /samples/html/donut2d_04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 59 | 60 | 61 |
62 |
63 | written by taylor 64 | View Code 65 |
说明
66 |
67 | 这是一个环形图示例，经过简单的配置样式，达到具有一定视觉效果的图表。 68 |
69 | 备注： 70 | 71 | 样式来源于网络。 72 | 73 |
74 | 75 | -------------------------------------------------------------------------------- /src/ichart.rectangle3d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the rectangle3d componment 3 | * @component#iChart.Rectangle3D 4 | * @extend#iChart.Rectangle 5 | */ 6 | iChart.Rectangle3D = iChart.extend(iChart.Rectangle,{ 7 | configure:function(){ 8 | /** 9 | * invoked the super class's configuration 10 | */ 11 | iChart.Rectangle3D.superclass.configure.apply(this,arguments); 12 | 13 | /** 14 | * indicate the component's type 15 | */ 16 | this.type = 'rectangle3d'; 17 | this.dimension = iChart._3D; 18 | 19 | this.set({ 20 | /** 21 | * @cfg {Number} Specifies Three-dimensional z-axis deep in pixels.Normally,this will given by chart.(default to undefined) 22 | */ 23 | zHeight:undefined, 24 | /** 25 | * @cfg {Number} Three-dimensional rotation X in degree(angle).socpe{0-90}.Normally,this will given by chart.(default to 60) 26 | */ 27 | xAngle:60, 28 | /** 29 | * @cfg {Number} Three-dimensional rotation Y in degree(angle).socpe{0-90}.Normally,this will given by chart.(default to 20) 30 | */ 31 | yAngle:20, 32 | xAngle_:undefined, 33 | yAngle_:undefined, 34 | /** 35 | * @cfg {Number} Override the default as 2 36 | */ 37 | shadow_offsetx:2 38 | }); 39 | 40 | }, 41 | drawRectangle:function(){ 42 | var _ = this._(); 43 | _.T.cube( 44 | _.get(_.X), 45 | _.get(_.Y), 46 | _.get('xAngle_'), 47 | _.get('yAngle_'), 48 | _.get(_.W), 49 | _.get(_.H), 50 | _.get('zHeight'), 51 | _.get('f_color'), 52 | _.get('border.enable'), 53 | _.get('border.width'), 54 | _.get('light_color'), 55 | _.get('shadow') 56 | ); 57 | }, 58 | isEventValid:function(e,_){ 59 | return {valid:_.get('actived')&&e.x>_.x&&e.x<(_.x+_.get(_.W))&&e.y<_.y+_.get(_.H)&&e.y>_.y}; 60 | }, 61 | tipInvoke:function(){ 62 | var _ = this._(); 63 | return function(w,h){ 64 | return { 65 | left:_.topCenterX - w/2, 66 | top:_.topCenterY - h 67 | } 68 | } 69 | }, 70 | doConfig:function(){ 71 | iChart.Rectangle3D.superclass.doConfig.call(this); 72 | var _ = this._(); 73 | _.pushIf("zHeight",_.get(_.W)); 74 | 75 | _.topCenterX=_.x+(_.get(_.W)+_.get(_.W)*_.get('xAngle_'))/2; 76 | _.topCenterY=_.y-_.get(_.W)*_.get('yAngle_')/2-_.get('value_space'); 77 | 78 | if(_.get('valueAlign')==_.O&&_.label){ 79 | _.label.push('textx',_.topCenterX); 80 | _.label.push('texty',_.topCenterY); 81 | } 82 | 83 | } 84 | }); 85 | /** 86 | *@end 87 | */ -------------------------------------------------------------------------------- /samples/html/animation_pie2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 55 | 56 | 57 |
58 |
59 | View Code 60 | written by taylor 61 |
说明
62 |
63 | 这是一个拥有动画的饼状图示例，该示例展示了2012年2月份市场浏览器占有的情况。此示例中，配置了默认的图例。并以百分比的形式展示数据值。
64 | 此例中配置animation:true则在图表展示的时候有一个类似开机动画的效果。 65 |
66 | 备注： 67 | 68 | 数据均为模拟。 69 | 70 |
71 | 72 | 73 | -------------------------------------------------------------------------------- /samples/html/columnmulti2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 56 | 57 | 58 |
59 |
60 | written by taylor 61 | View Code 62 |
说明
63 |
64 | 这是一个2D蔟状柱形图的示例，该示例展示了2012年上半年DPS01A型号与DPS01B型号的鼠标销售比较情况。 65 | 该示例设置了整体颜色以满足个性化的需要。并且设置了副标题和脚注满足信息展示的需要。 66 |
67 |
68 | 备注： 69 | 70 | 数据均为模拟。 71 | 72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /minify/ichart.line.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Line=iChart.extend(iChart.Chart,{configure:function(){iChart.Line.superclass.configure.call(this);this.type="line";this.set({brushsize:1,coordinate:{axis:{width:[0,0,2,2]}},crosshair:{enable:!1},tipMocker:null,tipMockerOffset:null,scaleAlign:"left",labelAlign:"bottom",labels:[],label_space:6,proportional_spacing:!0,sub_option:{},legend:{sign:"bar"},label:{}});this.registerEvent("parsePoint");this.lines=[];this.components.push(this.lines)},getCoordinate:function(){return this.coo},doConfig:function(){iChart.Line.superclass.doConfig.call(this);var a=this._(),f=1==a.data.length;a.lines.length=0;a.lines.zIndex=a.get("z_index");var p=a.pushIf("sub_option.keep_with_coordinate",f);a.get("crosshair.enable")&&(a.pushIf("crosshair.hcross",f),a.push("crosshair.invokeOffset",function(b){b=a.lines[0].isEventValid(b);return b.valid?b:p}));a.Combination||(a.push("coordinate.crosshair",a.get("crosshair")),a.pushIf("coordinate.scale",[{position:a.get("scaleAlign"),max_scale:a.get("maxValue")},{position:a.get("labelAlign"),start_scale:1,scale:1,end_scale:a.get("maxItemSize"),labels:a.get("labels"),label:a.get("label")}]));a.coo=iChart.Coordinate.coordinate_.call(a);a.Combination&&(a.coo.push("crosshair",a.get("crosshair")),a.coo.doCrosshair(a.coo));var g=f=a.coo.valid_width,l=a.get("maxItemSize")-1,m=f/l,h=a.get("point_space");a.get("proportional_spacing")&&(h&&hd?0:1n||j>c.top)c.top=j}return{left:c.left-a-q>5?c.left-a-5:c.left+5,top:c.top}});var k=a.get("tip.listeners.parseText");k&&delete a.get("tip.listeners").parseText;a.mocker=new iChart.Custom({eventValid:function(d){b=a.lines[0].isEventValid(d);b.hit=o!=b.i;if(b.valid){o=b.i;i=[];a.lines.each(function(a,c){e=a.isEventValid(d);if(c==0)b.minTop=b.maxTop=e.top;else{b.minTop=Math.min(b.minTop,e.top);b.maxTop=Math.max(b.maxTop,e.top)}i.push(k?k(null,e.name,e.value,e.text,e.i):e.name+" "+e.value)});b.text=a.get("tipMocker").call(a,i,b.i)||"tipMocker not return"}return b.valid?b:false}});new iChart.Tip(a.get("tip"),a.mocker);a.register(a.mocker)}a.pushIf("sub_option.area_opacity",a.get("area_opacity"))}}); -------------------------------------------------------------------------------- /samples/html/column2d_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 51 | 52 | 53 |
54 |
55 | written by taylor 56 | View Code 57 |
说明
58 |
59 | 你一定听过或者见识过各种Hello World，但是你知道把他们的身高(字母表中的位置)比一比是什么样子吗?
60 | 这是一个柱形图示例，该示例展示了Hello World中各个字母在字母表中的位置，将其位置换算成了身高以柱形图的形式展示。 61 |
62 | 备注： 63 | 64 | 数据均为模拟。 65 | 66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /src/ichart.linebasic2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview this component will draw a line2d chart. 3 | * @component#@chart#iChart.LineBasic2D 4 | * @extend#iChart.Line 5 | */ 6 | iChart.LineBasic2D = iChart.extend(iChart.Line, { 7 | /** 8 | * initialize the context for the LineBasic2D 9 | */ 10 | configure : function() { 11 | /** 12 | * invoked the super class's configuration 13 | */ 14 | iChart.LineBasic2D.superclass.configure.call(this); 15 | 16 | this.type = 'basicline2d'; 17 | 18 | this.tipInvokeHeap = []; 19 | }, 20 | doAnimation : function(t, d,_) { 21 | iChart.each(_.lines,function(l){ 22 | iChart.each(l.get('points'),function(p){ 23 | p.y = l.y - Math.ceil(_.animationArithmetic(t, 0, l.y - p.y_, d)); 24 | }); 25 | l.drawSegment(); 26 | }); 27 | }, 28 | doConfig : function() { 29 | iChart.LineBasic2D.superclass.doConfig.call(this); 30 | var _ = this._(); 31 | if(_.isE())return; 32 | /** 33 | * get the max/min scale of this coordinate for calculated the height 34 | */ 35 | var So,S, H = _.coo.valid_height, sp = _.get('point_space'), points, x, y, 36 | ox = _.get('sub_option.originx'), oy, p,N=_.get('nullToDirect'); 37 | 38 | _.push('sub_option.tip.showType', 'follow'); 39 | _.push('sub_option.coordinate', _.coo); 40 | _.push('sub_option.tipInvokeHeap', _.tipInvokeHeap); 41 | _.push('sub_option.point_space', sp); 42 | 43 | 44 | iChart.each(_.data,function(d){ 45 | So = _.coo.getScaleObj(d.scaleAlign||_.get('scaleAlign')), 46 | S = So.getScale(So); 47 | oy = _.get('sub_option.originy')-S.basic*H; 48 | points = []; 49 | 50 | iChart.each(d.value,function(v, j){ 51 | if(v!=null){ 52 | x = sp * j; 53 | y = So.getMark(v,S) * H; 54 | p = { 55 | x : ox + x, 56 | y : oy - y, 57 | value : v, 58 | text : d.name+' '+v 59 | }; 60 | iChart.merge(p, _.fireEvent(_, 'parsePoint', [d, v, x, y, j,S])); 61 | points.push(p); 62 | }else{ 63 | points.push({ignored:!N,direct:N}); 64 | } 65 | }, _); 66 | /** 67 | * merge the option 68 | */ 69 | iChart.merge(_.get('sub_option'),d); 70 | 71 | _.push('sub_option.points', points); 72 | _.push('sub_option.brushsize', d.linewidth || d.line_width); 73 | _.lines.push(new iChart.LineSegment(_.get('sub_option'), _)); 74 | }, this); 75 | } 76 | }); 77 | iChart.register('LineBasic2D'); 78 | /** 79 | * @end 80 | */ 81 | -------------------------------------------------------------------------------- /samples/html/event_column2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 58 | 59 | 60 |
61 |
62 | written by taylor 63 | View Code 64 |
说明
65 |
66 | 这是一个柱形图的示例，该示例展示了2012年2月份市场浏览器占有的情况。此示例中，配置了个性化的值轴。并以百分比的形式展示数据值。
67 | 在此示例中为每个柱体注册了一个点击事件的回调函数。回调函数中alert了点击的柱形图的名字和值。 68 |
69 | 备注： 70 | 71 | 数据均为模拟。 72 | 73 |
74 | 75 | -------------------------------------------------------------------------------- /samples/html/barmulti2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 66 | 67 | 68 |
69 |
70 | written by taylor 71 | View Code 72 |
说明
73 |
74 | 这是一个蔟状条形的示例，该示例展示了2012年上半年DPS01A型号与DPS01B型号的鼠标销售比较情况。 75 | 该示例设置了整体颜色以满足个性化的需要。并且设置了副标题和脚注满足信息展示的需要。并通过设置axis的width为0将坐标轴线隐藏。 76 |
77 |
78 | 备注： 79 | 80 | 数据均为模拟。 81 | 82 |
83 | 84 | 85 | -------------------------------------------------------------------------------- /minify/ichart.sector.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Sector=iChart.extend(iChart.Component,{configure:function(){iChart.Sector.superclass.configure.apply(this,arguments);this.type="sector";this.set({value:"",name:"",ignored:!1,counterclockwise:!1,startAngle:0,middleAngle:0,endAngle:0,totalAngle:0,bound_event:"click",expand:!1,donutwidth:0,mutex:!1,increment:void 0,label_length:void 0,gradient_mode:"RadialGradientOutIn",mini_label_threshold_angle:15,mini_label:!1,label:{},rounded:!1});this.atomic=!0;this.registerEvent("changed","parseText");this.tip=this.label=null},bound:function(){this.expanded||this.toggle()},rebound:function(){this.expanded&&this.toggle()},toggle:function(){this.fireEvent(this,this.get("bound_event"),[this])},getDimension:function(){var a=this._();return{x:a.x,x:a.y,startAngle:a.get("startAngle"),middleAngle:a.get("middleAngle"),endAngle:a.get("endAngle")}},doDraw:function(a){a.get("ignored")||(a.label&&!a.get("mini_label")&&a.label.draw(),a.drawSector(),a.label&&a.get("mini_label")&&a.label.draw())},doText:function(a,b,c){a.push("label.originx",b);a.push("label.originy",c);a.push("label.textBaseline","middle");a.label=new iChart.Text(a.get("label"),a)},doLabel:function(a,b,c,e,d,g,f,h){a.push("label.originx",b);a.push("label.originy",c);a.push("label.quadrantd",e);a.push("label.line_points",d);a.push("label.labelx",g);a.push("label.labely",f);a.push("label.smooth",h);a.push("label.angle",a.get("middleAngle")%(2*Math.PI));a.label=new iChart.Label(a.get("label"),a)},isLabel:function(){return this.get("label")&&!this.get("mini_label")},doConfig:function(){iChart.Sector.superclass.doConfig.call(this);var a=this._(),b=a.variable.event,c=a.get("label"),e=a.get("bound_event"),d;a.get("rounded")?(a.push("startAngle",0),a.push("endAngle",2*Math.PI)):(iChart.taylor.light(a,b),a.push("totalAngle",a.get("endAngle")-a.get("startAngle")),c&&(a.get("mini_label")&&(a.get("mini_label_threshold_angle")*Math.PI/180>a.get("totalAngle")?a.push("mini_label",!1):iChart.apply(a.get("label"),a.get("mini_label"))),a.push("label.text",a.fireString(a,"parseText",[a,a.get("label.text")],a.get("label.text"))),a.pushIf("label.border.color",a.get("border.color")),a.push("label.scolor",a.get("background_color"))),a.variable.event.status=a.expanded=a.get("expand"),a.get("tip.enable")&&("follow"!=a.get("tip.showType")&&a.push("tip.invokeOffsetDynamic",!1),a.tip=new iChart.Tip(a.get("tip"),a)),b.poped=!1,a.on(e,function(){b.poped=true;a.expanded=!a.expanded;a.redraw(e);b.poped=false}),a.on("beforedraw",function(g,f){if(f==e){d=false;a.x=a.get(a.X);a.y=a.get(a.Y);if(a.expanded)if(a.get("mutex")&&!b.poped){a.expanded=false;d=true}else{a.x=a.x+a.get("inc_x");a.y=a.y-a.get("inc_y")}if(b.status!=a.expanded){a.fireEvent(a,"changed",[a,a.expanded]);d=true;b.status=a.expanded}c&&d&&a.label.doLayout(a.get("inc_x")*(a.expanded?1:-1),-a.get("inc_y")*(a.expanded?1:-1),2,a.label)}return true}))}}); -------------------------------------------------------------------------------- /samples/html/event_pie2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 69 | 70 | 71 |
72 |
73 | written by taylor 74 | View Code 75 |
说明
76 |
77 | 这是一个基本的饼状图示例，示例展示了2012年2月份市场浏览器占有的情况。此示例中，你每点击一个扇形区就会消失一个。但是只有IE这个扇形不会消失。
78 |
79 | 备注： 80 | 81 | 数据均为模拟。 82 | 83 |
84 | 85 | -------------------------------------------------------------------------------- /samples/html/custom_column2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 66 | 67 | 68 |
69 |
70 | written by taylor 71 | View Code 72 |
说明
73 |
74 | 这是一个柱形图示例，该示例展示了2012年5个城市平均工资的情况。并且增加了一个绘制平均线的自定义组件。 75 |
76 | 备注： 77 | 78 | 数据均为模拟。 79 | 80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /samples/html/bar2d_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 67 | 68 | 69 |
70 |
71 | written by taylor 72 | View Code 73 |
说明
74 |
75 | 这是一个实际中的示例，示例背景为联想中国区总裁陈旭东微博透露，赛诺最新数据统计，2012年6月，联想手机超越诺基亚，以11%市场份额，成为中国市场第二； 76 |
77 | 备注： 78 | 79 | 数据来源互联网。 80 | 81 |
82 | 83 | -------------------------------------------------------------------------------- /samples/html/custom_column2d_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 69 | 70 | 71 |
72 |
73 | written by taylor 74 | View Code 75 |
说明
76 |
77 | 这是一个柱形图示例，该示例展示了2012年5个城市平均工资的情况。并且增加了一个绘制平均线(区域)和自定义组件。 78 |
79 | 备注： 80 | 81 | 数据均为模拟。 82 | 83 |
84 | 85 | 86 | -------------------------------------------------------------------------------- /src/ichart.sector2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the sector2d componment 3 | * @component#iChart.Sector2D 4 | * @extend#iChart.Sector 5 | */ 6 | iChart.Sector2D = iChart.extend(iChart.Sector,{ 7 | configure:function(){ 8 | /** 9 | * invoked the super class's configuration 10 | */ 11 | iChart.Sector2D.superclass.configure.apply(this,arguments); 12 | 13 | /** 14 | * indicate the component's type 15 | */ 16 | this.type = 'sector2d'; 17 | 18 | this.set({ 19 | /** 20 | * @cfg {Float (0~)} Specifies the sector's radius.Normally,this will given by chart.(default to 0) 21 | */ 22 | radius:0 23 | }); 24 | 25 | }, 26 | drawSector:function(){ 27 | this.T.sector( 28 | this.x, 29 | this.y, 30 | this.r, 31 | this.get('donutwidth'), 32 | this.get('startAngle'), 33 | this.get('endAngle'), 34 | this.get('f_color'), 35 | this.get('border.enable'), 36 | this.get('border.width'), 37 | this.get('border.color'), 38 | this.get('shadow'), 39 | this.get('counterclockwise')); 40 | }, 41 | isEventValid:function(e,_){ 42 | if(!_.get('ignored')){ 43 | if(_.isLabel()&&_.label.isEventValid(e,_.label).valid){ 44 | return {valid:true}; 45 | } 46 | 47 | var r = iChart.distanceP2P(_.x,_.y,e.x,e.y),b=_.get('donutwidth'); 48 | if(_.rr)){ 49 | return {valid:false}; 50 | } 51 | if(iChart.angleInRange(_.get('startAngle'),_.get('endAngle'),iChart.atan2Radian(_.x,_.y,e.x,e.y))){ 52 | return {valid:true}; 53 | } 54 | } 55 | return {valid:false}; 56 | }, 57 | tipInvoke:function(){ 58 | var _ = this,A = _.get('middleAngle'),Q = iChart.quadrantd(A); 59 | return function(w,h){ 60 | var P = iChart.p2Point(_.x,_.y,A,_.r*0.8) 61 | return { 62 | left:(Q>=1&&Q<=2)?(P.x - w):P.x, 63 | top:Q>=2?(P.y - h):P.y 64 | } 65 | } 66 | }, 67 | doConfig:function(){ 68 | iChart.Sector2D.superclass.doConfig.call(this); 69 | var _ = this._(); 70 | _.r = _.get('radius'); 71 | 72 | if(_.get('donutwidth')>_.r){ 73 | _.push('donutwidth',0); 74 | } 75 | 76 | _.applyGradient(_.x-_.r,_.y-_.r,2*_.r*0.9,2*_.r*0.9); 77 | 78 | var A = _.get('middleAngle'),L = _.pushIf('increment',iChart.lowTo(5,_.r/10)),p2; 79 | _.push('inc_x',L * Math.cos(2 * Math.PI -A)); 80 | _.push('inc_y',L * Math.sin(2 * Math.PI - A)); 81 | L *=2; 82 | if(_.get('label')){ 83 | if(_.get('mini_label')){ 84 | P2 = iChart.p2Point(_.x,_.y,A,_.get('donutwidth')?_.r - _.get('donutwidth')/2:_.r*5/8); 85 | _.doText(_,P2.x,P2.y); 86 | }else{ 87 | var Q = iChart.quadrantd(A), 88 | P = iChart.p2Point(_.x,_.y,A,_.r + L), 89 | C1 = iChart.p2Point(_.x,_.y,A,_.r + L*0.6); 90 | P2 = iChart.p2Point(_.x,_.y,A,_.r); 91 | _.doLabel(_,P2.x,P2.y,Q,[{x:P2.x,y:P2.y},{x:C1.x,y:C1.y},{x:P.x,y:P.y}],P.x,P.y,L*0.4); 92 | } 93 | } 94 | } 95 | }); 96 | /** 97 | * @end 98 | */ -------------------------------------------------------------------------------- /minify/ichart.pie.minify.js: -------------------------------------------------------------------------------- 1 | iChart.Pie=iChart.extend(iChart.Chart,{configure:function(){iChart.Pie.superclass.configure.call(this);this.type="pie";this.set({radius:"100%",offset_angle:0,separate_angle:0,bound_event:"click",counterclockwise:!1,intellectLayout:!0,layout_distance:4,pop_animate:!1,mutex:!1,increment:void 0,sub_option:{label:{}}});this.registerEvent("bound","rebound");this.sectors=[];this.components.push(this.sectors);this.ILLUSIVE_COO=!0},toggle:function(a){this.sectors[a||0].toggle()},bound:function(a){this.sectors[a||0].bound()},rebound:function(a){this.sectors[a||0].rebound()},getSectors:function(){return this.sectors},doAnimation:function(a,e,b){var f=0,g=b.oA;b.sectors.each(function(d){f=b.animationArithmetic(a,0,d.get("totalAngle"),e);d.push("startAngle",g);d.push("endAngle",g+=f);b.is3D()||d.drawSector()});b.is3D()&&b.proxy.drawSector()},parse:function(a){a.data.each(function(e,b){a.doParse(a,e,b)},a);a.localizer(a)},doParse:function(a,e,b){var f=e.name+" "+a.getPercent(e.value);a.doActing(a,e,null,b,f);a.push("sub_option.id",b);a.get("sub_option.label")&&a.push("sub_option.label.text",f);a.push("sub_option.listeners.changed",function(b,d){a.fireEvent(a,d?"bound":"rebound",[a,b.get("name")])});a.sectors.push(a.doSector(a,e))},doSector:function(a){return new iChart[a.sub](a.get("sub_option"),a)},dolayout:function(a,e,b,f,g,d){if(a.is3D()?iChart.inEllipse(a.get(a.X)-e,a.topY-b,a.a,a.b):iChart.distanceP2P(a.get(a.X),a.topY,e,b)h&&c.labely-h-1d&&c.labelx-dg?-1:1),c,f,g)},a);b.push(c)})}},doConfig:function(){iChart.Pie.superclass.doConfig.call(this);var a=this._(),e,b=a.get("radius"),f=a.get("sub_option.label")?0.35:0.44,g=2*Math.PI;a.sub=a.is3D()?"Sector3D":"Sector2D";a.sectors.zIndex=a.get("z_index");a.sectors.length=0;a.oA=iChart.angle2Radian(a.get("offset_angle"))%g;a.is3D()&&(f+=0.06);var d=a.data.length,h=iChart.angle2Radian(iChart.between(0,90,a.get("separate_angle"))),c=g-h,h=h/d,i=a.oA+h,j=i;0==a.total&&(e=1/d);a.data.each(function(b,f){i+=(e||b.value/a.total)*c;f==d-1&&(i=g+a.oA);b.startAngle=j;b.endAngle=i;b.totalAngle=i-j;b.middleAngle=(j+i)/2;j=i+h},a);a.r=b=iChart.parsePercent(b,Math.floor(a.get("minDistance")*f));a.topY=a.originXY(a,[b+a.get("l_originx"),a.get("r_originx")-b,a.get("centerx")],[a.get("centery")]).y;iChart.apply(a.get("sub_option"),iChart.clone([a.X,a.Y,"bound_event","mutex","increment"],a.options))}}); -------------------------------------------------------------------------------- /samples/html/bar2d_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 63 | 64 | 65 |
66 |
67 | written by debby 68 | View Code 69 |
说明
70 |
71 | 这是一个实际中常见的示例，利用条形图展示了2012年实际的销售分布的情况。设置了副标题与脚注来增加信息的完整性。设置了自定义的刻度值。 72 |
73 | 备注： 74 | 75 | 数据均为模拟。 76 | 77 |
78 | 79 | -------------------------------------------------------------------------------- /samples/html/column2d_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 74 | 75 | 76 |
77 |
78 | written by taylor 79 | View Code 80 |
说明
81 |
82 | 这是一个柱形图示例，该示例展示了从2011年10月份到2012年10月份中国社交网站的TOP7。在该示例中，设计了一个具有一定高度的坐标轴。 83 |
84 | 备注： 85 | 86 | 数据均为模拟。 87 | 88 |
89 | 90 | 91 | -------------------------------------------------------------------------------- /samples/html/animation_bar2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 8 | 10 | 11 | 12 | 92 | 93 | 94 |
95 |
96 | written by taylor 98 | 99 | 预览代码 100 |
101 | 说明 102 |
103 |
104 | 这是一个实际中的示例，示例背景为联想中国区总裁陈旭东微博透露，赛诺最新数据统计，2012年6月，联想手机超越诺基亚，以11%市场份额，成为中国市场第二； 105 |
106 | 备注： 107 | 数据来源互联网。 108 |
109 | 110 | -------------------------------------------------------------------------------- /samples/html/column3d_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 77 | 78 | 79 |
80 |
81 | written by Limi 83 | 预览代码 84 |
85 | 说明 86 |
87 |
88 | 本报告数据，来源于百度统计所覆盖的超过150万的站点，而不是baidu.com的流量数据。 89 |
90 | 备注： 91 | 来自baidu统计。 92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /samples/html/line2d_05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 84 | 85 | 86 |
87 |
88 | written by taylor 89 | View Code 90 |
说明
91 |
92 | 这是一个很常见的的折线图示例，示例展示了网站最近5天的流量统计。每隔6个小时统计一次。此示例用了平滑曲线代替直线。 93 |
94 | 备注： 95 | 96 | 数据均为模拟。 97 | 98 |
99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /samples/html/bar2d_04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 11 | 73 | 74 | 75 |
76 |
77 | written by taylor 78 | View Code 79 |
说明
80 |
81 | 这是一个条形图的示例，该示例展示了从2011年10月份到2012年10月份中国社交网站的TOP7。在该示例中，设计了一个具有一定高度的x坐标轴。 82 |
83 | 备注： 84 | 85 | 数据来源互联网。 86 | 87 |
88 | 89 | -------------------------------------------------------------------------------- /samples/html/donut2d_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 81 | 82 | 83 |
84 |
85 | written by taylor 86 | View Code 87 |
说明
88 |
89 | 这是一个环形图示例，展示了UC浏览器、手机QQ浏览器及欧朋浏览器分别以活跃用户市场40%、37.1%及13.8%的份额位列第三方手机浏览器市场前三甲。 90 |
91 | 备注： 92 | 93 | 数据来源于网络。 94 | 95 |
96 | 97 | -------------------------------------------------------------------------------- /samples/html/donut2d_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 77 | 78 | 79 |
80 |
81 | written by taylor 82 | View Code 83 |
说明
84 |
85 | 这是一个环形图示例，风格图片来源于网络。示例中大量运用了偏移来定位各个组件的位置，以达到效果。 86 |
87 | 备注： 88 | 89 | 数据来源于网络。 90 | 91 |
92 | 93 | -------------------------------------------------------------------------------- /samples/html/donut2d_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ichartjs 示例 7 | 8 | 9 | 10 | 11 | 87 | 88 | 89 |
90 |
91 | written by taylor 92 | View Code 93 |
说明
94 |
95 | 这是一个基本的环形图示例，展示了作为前端攻城师所需要掌握的技能比。 96 |
97 | 备注： 98 | 99 | 模拟数据,仅用于展示图表。 100 | 101 |
102 | 103 | 104 | -------------------------------------------------------------------------------- /samples/css/style.css: -------------------------------------------------------------------------------- 1 | @CHARSET "utf-8"; 2 | body { 3 | padding:0px; 4 | margin:0px; 5 | text-align: center; 6 | font-family:'微软雅黑',Trebuchet MS,Verdana,Helvetica,Arial,sans-serif; 7 | background-color: #FAFAFA; 8 | } 9 | 10 | #ichartjs_wrapper{ 11 | margin:0px auto; 12 | height:810px; 13 | width:1050px; 14 | -webkit-box-shadow:0px 0px 10px #202936; 15 | -moz-box-shadow:0px 0px 10px #202936; 16 | box-shadow:0px 0px 10px #202936; 17 | } 18 | #ichartjs_header{ 19 | height:95px; 20 | width:1050px; 21 | margin-bottom:10px; 22 | } 23 | 24 | #ichart_header_top{ 25 | position:relative; 26 | height:95px; 27 | background:url(../images/ichart_top_bg.png); 28 | background-repeat:repeat-y; 29 | background-repeat: repeat; 30 | } 31 | 32 | #ichart_header_line{ 33 | height:5px; 34 | background:url(../images/ichart_menu_line.png); 35 | background-repeat: repeat; 36 | } 37 | #ichart_header_logo{ 38 | width:370px; 39 | height:95px; 40 | background:url(../images/ichart_logo.png); 41 | background-repeat:no-repeat; 42 | } 43 | #ichart_header_description{ 44 | position: absolute; 45 | bottom:10px; 46 | right:10px; 47 | font-weight:600; 48 | color:#515760; 49 | font-size:24px; 50 | } 51 | 52 | #ichartjs_body{ 53 | height:700px; 54 | width:1050px; 55 | background-color: #FEFEFE; 56 | } 57 | #ichartjs_menu{ 58 | width:215px; 59 | margin-left:5px; 60 | float:left; 61 | background-color: #FEFEFE; 62 | } 63 | #ichartjs_accordion{ 64 | text-align: left; 65 | } 66 | #ichartjs_accordion h3{ 67 | font-size: 14px; 68 | text-align: left; 69 | font-weight:600; 70 | } 71 | .ichartjs_item{ 72 | font-size:12px; 73 | line-height:25px; 74 | display: block; 75 | padding-left:24px; 76 | background:url(../images/ichart_arrow.png); 77 | background-repeat:no-repeat; 78 | } 79 | .ui-accordion .ui-accordion-content{ 80 | padding: 5px 10px; 81 | } 82 | .ui-widget{ 83 | font-size:12px; 84 | } 85 | 86 | #ichartjs_view{ 87 | width:820px; 88 | height:700px; 89 | float:right; 90 | font-family:'微软雅黑',Trebuchet MS,Verdana,Helvetica,Arial,sans-serif; 91 | background-color: #FAFAFA; 92 | } 93 | .ichartjs_row{ 94 | font-size:12px; 95 | } 96 | #ichartjs_number{ 97 | font-size:12px; 98 | color:#2B91AF; 99 | cursor:pointer; 100 | text-align: right; 101 | padding:10px 0px; 102 | margin:0px; 103 | } 104 | .ichartjs_number{ 105 | padding:0px 4px; 106 | } 107 | .ichartjs_number_over{ 108 | background-color: #dfeaec; 109 | } 110 | #ichartjs_code{ 111 | border:1px solid #D1D7DC; 112 | background-color: #FFFFFF; 113 | font-size:12px; 114 | padding:2px; 115 | margin-right:10px; 116 | } 117 | 118 | #ichartjs_pre{ 119 | border-left:1px solid #D1D7DC; 120 | background-color: #FAFAFA; 121 | text-align: left; 122 | padding:10px; 123 | margin:0px; 124 | } 125 | .ichartjs_keyword{ 126 | color:#7f0074; 127 | } 128 | .ichartjs_string{ 129 | color:#5400ff; 130 | } 131 | .ichartjs_note{ 132 | color:#008239; 133 | } 134 | 135 | 136 | .ichartjs_home a:LINK{ 137 | color:#FEFEFE; 138 | text-decoration: none; 139 | } 140 | .ichartjs_home a:VISITED{ 141 | color:#FEFEFE; 142 | } 143 | .ichartjs_home a:HOVER{ 144 | color:#d9e8ec; 145 | text-decoration:underline; 146 | } 147 | .ichartjs_home a:ACTIVE{ 148 | color:#d9e8ec; 149 | } 150 | -------------------------------------------------------------------------------- /samples/html/line2d_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 98 | 99 | 100 |
101 |
102 | written by taylor 103 | View Code 104 |
说明
105 |
106 | 这是一个很常见的的折线图示例，示例展示了网站最近5天的流量统计。每隔2个小时统计一次。通过统计图可以看出每天晚上18：00-22：00访问量较大。 107 |
108 | 备注： 109 | 110 | 数据均为模拟。 111 | 112 |
113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /src/ichart.sector3d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @overview the sector3d componment 3 | * @component#iChart.Sector3D 4 | * @extend#iChart.Sector 5 | */ 6 | iChart.Sector3D = iChart.extend(iChart.Sector,{ 7 | configure:function(){ 8 | /** 9 | * invoked the super class's configuration 10 | */ 11 | iChart.Sector3D.superclass.configure.apply(this,arguments); 12 | 13 | /** 14 | * indicate the component's type 15 | */ 16 | this.type = 'sector3d'; 17 | this.dimension = iChart._3D; 18 | 19 | this.set({ 20 | /** 21 | * @cfg {Number} Specifies major semiaxis of ellipse.Normally,this will given by chart.(default to 0) 22 | */ 23 | semi_major_axis:0, 24 | /** 25 | * @cfg {Number} Specifies minor semiaxis of ellipse.Normally,this will given by chart.(default to 0) 26 | */ 27 | semi_minor_axis:0, 28 | /** 29 | * @cfg {Float (0~)} Specifies the sector's height(thickness).Normally,this will given by chart.(default to 0) 30 | */ 31 | cylinder_height:0 32 | }); 33 | 34 | this.proxy = true; 35 | }, 36 | isEventValid:function(e,_){ 37 | if(!_.get('ignored')){ 38 | if(_.isLabel()&&_.label.isEventValid(e,_.label).valid){ 39 | return {valid:true}; 40 | } 41 | if(!iChart.inEllipse(e.x - _.x,e.y-_.y,_.a,_.b)){ 42 | return {valid:false}; 43 | } 44 | if(iChart.angleZInRange(_.sA,_.eA,iChart.atan2Radian(_.x,_.y,e.x,e.y))){ 45 | return {valid:true}; 46 | } 47 | } 48 | return {valid:false}; 49 | }, 50 | p2p:function(x,y,a,z){ 51 | return { 52 | x:x+this.a*Math.cos(a)*z, 53 | y:y+this.b*Math.sin(a)*z 54 | }; 55 | }, 56 | tipInvoke:function(){ 57 | var _ = this,A = _.get('middleAngle'),Q = iChart.quadrantd(A); 58 | return function(w,h){ 59 | var P = _.p2p(_.x,_.y,A,0.6); 60 | return { 61 | left:(Q>=2&&Q<=3)?(P.x - w):P.x, 62 | top:Q>=3?(P.y - h):P.y 63 | } 64 | } 65 | }, 66 | doConfig:function(){ 67 | iChart.Sector3D.superclass.doConfig.call(this); 68 | var _ = this._(),ccw = _.get('counterclockwise'),mA = _.get('middleAngle'); 69 | 70 | _.a = _.get('semi_major_axis'); 71 | _.b = _.get('semi_minor_axis'); 72 | _.h = _.get('cylinder_height'); 73 | 74 | iChart.Assert.isTrue(_.a*_.b>=0,'major&minor'); 75 | 76 | var pi2 = 2 * Math.PI,toAngle = function(A){ 77 | while(A<0)A+=pi2; 78 | return Math.abs(iChart.atan2Radian(0,0,_.a*Math.cos(A),ccw?(-_.b*Math.sin(A)):(_.b*Math.sin(A)))); 79 | }, 80 | L = _.pushIf('increment',iChart.lowTo(5,_.a/10)); 81 | _.sA = toAngle.call(_,_.get('startAngle')); 82 | _.eA = toAngle.call(_,_.get('endAngle')); 83 | _.mA = toAngle.call(_,mA); 84 | 85 | _.push('inc_x',L * Math.cos(pi2 -_.mA)); 86 | _.push('inc_y',L * Math.sin(pi2 - _.mA)); 87 | L *=2; 88 | if(_.get('label')){ 89 | if(_.get('mini_label')){ 90 | var P3 = _.p2p(_.x,_.y,mA,0.5); 91 | _.doText(_,P3.x,P3.y); 92 | }else{ 93 | var Q = iChart.quadrantd(mA), 94 | P = _.p2p(_.x,_.y,mA,L/_.a+1), 95 | C1 = _.p2p(_.x,_.y,mA,L*0.6/_.a+1), 96 | P2 = _.p2p(_.x,_.y,mA,1); 97 | _.doLabel(_,P2.x,P2.y,Q,[{x:P2.x,y:P2.y},{x:C1.x,y:C1.y},{x:P.x,y:P.y}],P.x,P.y,L*0.4); 98 | 99 | } 100 | } 101 | } 102 | }); 103 | /** 104 | *@end 105 | */ -------------------------------------------------------------------------------- /samples/html/pie2d_04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 96 | 97 | 98 |
99 |
100 | written by taylor 101 | View Code 102 |
说明
103 |
104 | 设置了个性化视觉的饼图示例。大量利用了边框设置层次视觉。 105 |
106 | 备注： 107 | 108 | 数据来源于StatCounter。 109 | 110 |
111 | 112 | -------------------------------------------------------------------------------- /samples/html/pie3d_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ichartjs 示例 6 | 7 | 8 | 9 | 10 | 96 | 97 | 98 |
99 |
100 | written by taylor 101 | View Code 102 |
说明
103 |
104 | 设置了个性化视觉的3D饼图示例。大量利用了边框设置层次视觉。 105 |
106 | 备注： 107 | 108 | 数据来源于StatCounter。 109 | 110 |
111 | 112 | --------------------------------------------------------------------------------