├── .gitignore ├── LICENSE ├── RELEASENOTES.md ├── examples ├── case.js ├── demo.we ├── include │ ├── example-list-item.we │ └── example-list.we ├── index.we └── package.json ├── js ├── CanvasElement.js ├── chart.js ├── chart.we ├── index.js ├── package.json └── readme.md ├── plugin.xml └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | node_modules 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. -------------------------------------------------------------------------------- /RELEASENOTES.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weex-plugins/Chart-for-Apache-Weex/e5ca91b2dc4aa7fefe07fd4b357819761a048a68/RELEASENOTES.md -------------------------------------------------------------------------------- /examples/case.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by godsong on 16/12/12. 3 | */ 4 | 5 | //var Canvas=require('../../../js/core/gcanvas'); 6 | var Canvas=require('weex-gcanvas'); 7 | 8 | //字体渲染测试 9 | exports.case0 = function (GM,context) { 10 | 11 | 12 | var margin = 30; 13 | context = Canvas.getContext('2d'); 14 | 15 | 16 | /* 17 | context.font="30px"; 18 | context.fillText("1 abc 你好 123 ~!@#$%^&*()_+",20,50); 19 | 20 | context.font="30px Arial"; 21 | context.fillText("2 abc 你好 123 ~!@#$%^&*()_+",20,50 + margin); 22 | 23 | context.font="30px sans-serif"; 24 | context.fillText("3 abc 你好 123 ~!@#$%^&*()_+",20,50 + margin*2); 25 | */ 26 | 27 | //context.font="30px NotoSansSC"; 28 | //context.fillText("4 abc 你好 123 ~!@#$%^&*()_+",20,250); 29 | context.font="30px sans-serif"; 30 | context.fillText("font test",20,50 + margin*3); 31 | 32 | context.font="30px sans-serif"; 33 | context.fillText("5.1 abcdefghijklmn ABCDEFGHIJKLMNOPQRSTUVWXYZ",20,50 + margin*4); 34 | 35 | context.font="30px serif"; 36 | context.fillText("5.2 abcdefghijklmn ABCDEFGHIJKLMNOPQRSTUVWXYZ",20,50 + margin*5); 37 | 38 | context.font="30px SimSun"; 39 | context.fillText("你好 阿里巴巴 淘宝 天猫 阿里云 菜鸟",20,50 + margin*6); 40 | 41 | context.font="30px Arial"; 42 | context.fillText("你好 阿里巴巴 淘宝 天猫 阿里云 菜鸟",20,50 + margin*7); 43 | 44 | context.font="30px serif"; 45 | context.fillText("5.3 1234567890",20,50 + margin*8); 46 | 47 | context.font="30px sans-serif"; 48 | context.fillText("5.4 1234567890",20,50 + margin*9); 49 | 50 | context.font="30px sans-serif"; 51 | context.fillText("5.5 ~!@#$%^&*()_+{}|[]\:\";''<>?,./",20, 50 + margin*10); 52 | 53 | context.font="30px serif"; 54 | context.fillText("5.6 ~!@#$%^&*()_+{}|[]\:\";''<>?,./",20, 50 + margin*11); 55 | 56 | context.render(); 57 | 58 | 59 | }; 60 | 61 | //点图 62 | exports.case1 = function (GM) { 63 | GM.Global.pixelRatio = 1; 64 | var Util = GM.Util; 65 | var data = [ 66 | {"time": '2016-08-08 00:00:00', "tem": 10}, 67 | {"time": '2016-08-08 00:10:00', "tem": 22}, 68 | {"time": '2016-08-08 00:30:00', "tem": 20}, 69 | {"time": '2016-08-09 00:35:00', "tem": 26}, 70 | {"time": '2016-08-09 01:00:00', "tem": 20}, 71 | {"time": '2016-08-09 01:20:00', "tem": 26}, 72 | {"time": '2016-08-10 01:40:00', "tem": 28}, 73 | {"time": '2016-08-10 02:00:00', "tem": 20}, 74 | {"time": '2016-08-10 02:20:00', "tem": 28} 75 | ]; 76 | var chart = new GM.Chart({ 77 | id: 'c1' 78 | }); 79 | var defs = { 80 | time: { 81 | type: 'timeCat', 82 | mask: 'mm/dd', 83 | tickCount: 3 84 | }, 85 | tem: { 86 | tickCount: 5, 87 | min: 0 88 | } 89 | }; 90 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 91 | chart.axis('tem', { 92 | label: { 93 | fontSize: 14, 94 | fontFamily: "sans-serif" 95 | } 96 | }); 97 | chart.axis('time', { 98 | label: { 99 | fontSize: 14, 100 | fontFamily: "sans-serif" 101 | } 102 | }); 103 | chart.source(data, defs); 104 | chart.point().position('time*tem'); 105 | chart.render(); 106 | }; 107 | 108 | //折线图 109 | exports.case2 = function (GM) { 110 | 111 | GM.Global.pixelRatio = 1; 112 | var Util = GM.Util; 113 | var data = [ 114 | {"time": '2016-08-08 00:00:00', "tem": 10}, 115 | {"time": '2016-08-08 00:10:00', "tem": 22}, 116 | {"time": '2016-08-08 00:30:00', "tem": 20}, 117 | {"time": '2016-08-09 00:35:00', "tem": 26}, 118 | {"time": '2016-08-09 01:00:00', "tem": 20}, 119 | {"time": '2016-08-09 01:20:00', "tem": 26}, 120 | {"time": '2016-08-10 01:40:00', "tem": 28}, 121 | {"time": '2016-08-10 02:00:00', "tem": 20}, 122 | {"time": '2016-08-10 02:20:00', "tem": 28} 123 | ]; 124 | var chart = new GM.Chart({ 125 | id: 'c1' 126 | }); 127 | var defs = { 128 | time: { 129 | type: 'timeCat', 130 | mask: 'mm/dd', 131 | tickCount: 3, 132 | range: [0, 1] 133 | }, 134 | tem: { 135 | tickCount: 5, 136 | min: 0 137 | } 138 | }; 139 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 140 | chart.axis('tem', { 141 | label: { 142 | fontSize: 14, 143 | fontFamily: "sans-serif" 144 | } 145 | }); 146 | chart.axis('time', { 147 | label: { 148 | fontSize: 14, 149 | fontFamily: "sans-serif" 150 | } 151 | }); 152 | chart.source(data, defs); 153 | chart.line().position('time*tem'); 154 | chart.render(); 155 | 156 | }; 157 | 158 | //平滑折线图 159 | exports.case3 = function (GM) { 160 | 161 | GM.Global.pixelRatio = 1; 162 | var Util = GM.Util; 163 | var data = [ 164 | {"time": '周一', "tem": 10, "city": "beijing"}, 165 | {"time": '周二', "tem": 22, "city": "beijing"}, 166 | {"time": '周三', "tem": 20, "city": "beijing"}, 167 | {"time": '周四', "tem": 26, "city": "beijing"}, 168 | {"time": '周五', "tem": 20, "city": "beijing"}, 169 | {"time": '周六', "tem": 26, "city": "beijing"}, 170 | {"time": '周日', "tem": 28, "city": "beijing"}, 171 | {"time": '周一', "tem": 5, "city": "newYork"}, 172 | {"time": '周二', "tem": 12, "city": "newYork"}, 173 | {"time": '周三', "tem": 26, "city": "newYork"}, 174 | {"time": '周四', "tem": 20, "city": "newYork"}, 175 | {"time": '周五', "tem": 28, "city": "newYork"}, 176 | {"time": '周六', "tem": 26, "city": "newYork"}, 177 | {"time": '周日', "tem": 20, "city": "newYork"} 178 | ]; 179 | var chart = new GM.Chart({ 180 | id: 'c1' 181 | }); 182 | var defs = { 183 | time: { 184 | tickCount: 7, 185 | range: [0, 1] 186 | }, 187 | tem: { 188 | tickCount: 5, 189 | min: 0 190 | } 191 | }; 192 | //配置time刻度文字样式 193 | var label = { 194 | fill: '#979797', 195 | font: '14px SimSun', 196 | offset: 6 197 | }; 198 | 199 | 200 | 201 | chart.axis('time', { 202 | label: function (text, index, total) { 203 | 204 | var cfg = Util.mix({}, label); 205 | // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐 206 | if (index === 0) { 207 | cfg.textAlign = 'start'; 208 | } 209 | if (index > 0 && index === total - 1) { 210 | cfg.textAlign = 'end'; 211 | } 212 | return cfg; 213 | } 214 | }); 215 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 216 | chart.axis('tem', { 217 | label: { 218 | fontSize: 14, 219 | fontFamily: 'sans-serif' 220 | } 221 | }); 222 | chart.source(data, defs); 223 | chart.line().position('time*tem').color('city').shape('smooth'); 224 | chart.render(); 225 | 226 | }; 227 | 228 | //带点折线图 229 | exports.case4 = function (GM) { 230 | 231 | //双精度 232 | GM.Global.pixelRatio = 1; 233 | var Util = GM.Util; 234 | var data = [ 235 | {"time": '2016-08-08 00:00:00', "tem": 10}, 236 | {"time": '2016-08-08 00:10:00', "tem": 22}, 237 | {"time": '2016-08-08 00:30:00', "tem": 20}, 238 | {"time": '2016-08-09 00:35:00', "tem": 26}, 239 | {"time": '2016-08-09 01:00:00', "tem": 20}, 240 | {"time": '2016-08-09 01:20:00', "tem": 26}, 241 | {"time": '2016-08-10 01:40:00', "tem": 28}, 242 | {"time": '2016-08-10 02:00:00', "tem": 20}, 243 | {"time": '2016-08-10 02:20:00', "tem": 28} 244 | ]; 245 | var chart = new GM.Chart({ 246 | id: 'c1' 247 | }); 248 | var defs = { 249 | time: { 250 | type: 'timeCat', 251 | mask: 'yyyy-mm-dd', 252 | tickCount: 2, 253 | range: [0, 1] 254 | }, 255 | tem: { 256 | tickCount: 5, 257 | min: 0 258 | } 259 | }; 260 | //配置time刻度文字样式 261 | var label = { 262 | fill: '#979797', 263 | font: '14px sans-serif', 264 | offset: 6 265 | }; 266 | chart.axis('time', { 267 | label: function (text, index, total) { 268 | var cfg = Util.mix({}, label); 269 | // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐 270 | if (index === 0) { 271 | cfg.textAlign = 'start'; 272 | } 273 | if (index > 0 && index === total - 1) { 274 | cfg.textAlign = 'end'; 275 | } 276 | return cfg; 277 | } 278 | }); 279 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 280 | chart.axis('tem', { 281 | label: { 282 | fontSize: 14, 283 | fontFamily: "sans-serif" 284 | } 285 | }); 286 | chart.source(data, defs); 287 | chart.line().position('time*tem').shape('smooth'); 288 | chart.point().position('time*tem'); 289 | chart.render(); 290 | }; 291 | 292 | //区域图 293 | exports.case5 = function (GM) { 294 | 295 | var Util = GM.Util; 296 | // 双精度 297 | GM.Global.pixelRatio = 1; 298 | var data = [ 299 | {"time": '2016-08-08 00:00:00', "tem": 10, "city": "beijing"}, 300 | {"time": '2016-08-08 00:10:00', "tem": 22, "city": "beijing"}, 301 | {"time": '2016-08-08 00:30:00', "tem": 16, "city": "beijing"}, 302 | {"time": '2016-08-09 00:35:00', "tem": 26, "city": "beijing"}, 303 | {"time": '2016-08-09 01:00:00', "tem": 12, "city": "beijing"}, 304 | {"time": '2016-08-09 01:20:00', "tem": 26, "city": "beijing"}, 305 | {"time": '2016-08-10 01:40:00', "tem": 18, "city": "beijing"}, 306 | {"time": '2016-08-10 02:00:00', "tem": 26, "city": "beijing"}, 307 | {"time": '2016-08-10 02:20:00', "tem": 12, "city": "beijing"}, 308 | {"time": '2016-08-08 00:00:00', "tem": 28, "city": "newYork"}, 309 | {"time": '2016-08-08 00:10:00', "tem": 16, "city": "newYork"}, 310 | {"time": '2016-08-08 00:30:00', "tem": 26, "city": "newYork"}, 311 | {"time": '2016-08-09 00:35:00', "tem": 12, "city": "newYork"}, 312 | {"time": '2016-08-09 01:00:00', "tem": 26, "city": "newYork"}, 313 | {"time": '2016-08-09 01:20:00', "tem": 20, "city": "newYork"}, 314 | {"time": '2016-08-10 01:40:00', "tem": 29, "city": "newYork"}, 315 | {"time": '2016-08-10 02:00:00', "tem": 16, "city": "newYork"}, 316 | {"time": '2016-08-10 02:20:00', "tem": 22, "city": "newYork"} 317 | ]; 318 | var chart = new GM.Chart({ 319 | id: 'c1' 320 | }); 321 | chart.source(data, { 322 | time: { 323 | type: 'timeCat', 324 | mask: 'yyyy-mm-dd', 325 | tickCount: 3, 326 | range: [0, 1] 327 | }, 328 | tem: { 329 | tickCount: 5, 330 | min: 0 331 | } 332 | }); 333 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 334 | chart.axis('tem', { 335 | label: { 336 | fontSize: 14, 337 | fontFamily: "sans-serif" 338 | } 339 | }); 340 | //配置time刻度文字样式 341 | var label = { 342 | fill: '#979797', 343 | font: '14px sans-serif', 344 | offset: 6 345 | }; 346 | chart.axis('time', { 347 | label: function (text, index, total) { 348 | var cfg = Util.mix({}, label); 349 | // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐 350 | if (index === 0) { 351 | cfg.textAlign = 'start'; 352 | } 353 | if (index > 0 && index === total - 1) { 354 | cfg.textAlign = 'end'; 355 | } 356 | return cfg; 357 | } 358 | }); 359 | chart.area().position('time*tem').color('city').shape('smooth').style({ 360 | opacity: 0.6 361 | }); 362 | chart.render(); 363 | }; 364 | 365 | 366 | //带事件的重叠区域图 367 | exports.case6 = function (GM) { 368 | 369 | GM.Global.pixelRatio = 1; 370 | var data = [ 371 | {"month": 12, "tem": 7, "city": "tokyo"}, 372 | {"month": 1, "tem": 6.9, "city": "tokyo"}, 373 | {"month": 2, "tem": 9.5, "city": "tokyo"}, 374 | {"month": 3, "tem": 14.5, "city": "tokyo"}, 375 | {"month": 4, "tem": 18.2, "city": "tokyo"}, 376 | {"month": 5, "tem": 21.5, "city": "tokyo"}, 377 | {"month": 6, "tem": 25.2, "city": "tokyo"}, 378 | {"month": 7, "tem": 26.5, "city": "tokyo"}, 379 | {"month": 8, "tem": 23.3, "city": "tokyo"}, 380 | {"month": 9, "tem": 18.3, "city": "tokyo"}, 381 | {"month": 10, "tem": 13.9, "city": "tokyo"}, 382 | {"month": 11, "tem": 9.6, "city": "tokyo"}, 383 | {"month": 12, "tem": 0, "city": "newYork"}, 384 | {"month": 1, "tem": 0.8, "city": "newYork"}, 385 | {"month": 2, "tem": 5.7, "city": "newYork"}, 386 | {"month": 3, "tem": 11.3, "city": "newYork"}, 387 | {"month": 4, "tem": 17, "city": "newYork"}, 388 | {"month": 5, "tem": 22, "city": "newYork"}, 389 | {"month": 6, "tem": 24.8, "city": "newYork"}, 390 | {"month": 7, "tem": 24.1, "city": "newYork"}, 391 | {"month": 8, "tem": 20.1, "city": "newYork"}, 392 | {"month": 9, "tem": 14.1, "city": "newYork"}, 393 | {"month": 10, "tem": 8.6, "city": "newYork"}, 394 | {"month": 11, "tem": 2.5, "city": "newYork"}, 395 | {"month": 12, "tem": 2, "city": "berlin"}, 396 | {"month": 1, "tem": 0.6, "city": "berlin"}, 397 | {"month": 2, "tem": 3.5, "city": "berlin"}, 398 | {"month": 3, "tem": 8.4, "city": "berlin"}, 399 | {"month": 4, "tem": 13.5, "city": "berlin"}, 400 | {"month": 5, "tem": 17, "city": "berlin"}, 401 | {"month": 6, "tem": 18.6, "city": "berlin"}, 402 | {"month": 7, "tem": 17.9, "city": "berlin"}, 403 | {"month": 8, "tem": 14.3, "city": "berlin"}, 404 | {"month": 9, "tem": 9, "city": "berlin"}, 405 | {"month": 10, "tem": 3.9, "city": "berlin"}, 406 | {"month": 11, "tem": 1, "city": "berlin"} 407 | ]; 408 | var chart = new GM.Chart({ 409 | id: 'c1' 410 | }); 411 | chart.source(data, { 412 | month: { 413 | tickCount: 12 414 | }, 415 | tem: { 416 | tickCount: 5 417 | } 418 | }); 419 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 420 | chart.axis('tem', { 421 | label: { 422 | fontSize: 14, 423 | fontFamily: "sans-serif" 424 | } 425 | }); 426 | chart.axis('month', { 427 | label: { 428 | fontSize: 14, 429 | fontFamily: "sans-serif" 430 | } 431 | }); 432 | chart.areaStack().position('month*tem').color('city').shape('smooth').style({ 433 | opacity: 0.6 434 | }); 435 | chart.render(); 436 | function getPoint(canvas, x, y) { 437 | var bbox = canvas.getBoundingClientRect(); 438 | return { 439 | x: x - bbox.left, 440 | y: y - bbox.top 441 | }; 442 | } 443 | 444 | }; 445 | 446 | //柱状图 447 | exports.case7 = function (GM) { 448 | 449 | GM.Global.pixelRatio = 1; 450 | var data = [ 451 | {"tem": 10, "city": "tokyo"}, 452 | {"tem": 4, "city": "newYork"}, 453 | {"tem": 3, "city": "berlin"} 454 | ]; 455 | var chart = new GM.Chart({ 456 | id: 'c1' 457 | }); 458 | chart.source(data, { 459 | tem: { 460 | tickCount: 5 461 | } 462 | }); 463 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 464 | chart.axis('city', { 465 | label: { 466 | fontSize: 14, 467 | fontFamily: "sans-serif" 468 | }, 469 | grid: null 470 | }); 471 | chart.axis('tem', { 472 | label: { 473 | fontSize: 14, 474 | fontFamily: "sans-serif" 475 | } 476 | }); 477 | chart.interval().position('city*tem').color('city'); 478 | chart.render(); 479 | 480 | }; 481 | 482 | //区间柱状图 483 | exports.case8 = function (GM) { 484 | 485 | GM.Global.pixelRatio = 1; 486 | var data = [ 487 | {"month": '周一', "tem": [0, 7]}, 488 | {"month": '周二', "tem": [7, 5]}, 489 | {"month": '周三', "tem": [5, 9.5]}, 490 | {"month": '周四', "tem": [9.5, 14.5]}, 491 | {"month": '周五', "tem": [14.5, 10.2]}, 492 | {"month": '周六', "tem": [10.2, 21.5]}, 493 | {"month": '周日', "tem": [21.5, 25.2]} 494 | ]; 495 | var chart = new GM.Chart({ 496 | id: 'c1' 497 | }); 498 | chart.source(data, { 499 | tem: { 500 | tickCount: 5 501 | } 502 | }); 503 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 504 | chart.axis('month', { 505 | label: { 506 | fontSize: 14, 507 | fontFamily: "SimSun" 508 | 509 | }, 510 | grid: null 511 | }); 512 | chart.axis('tem', { 513 | label: { 514 | fontSize: 14, 515 | fontFamily: "sans-serif" 516 | } 517 | }); 518 | chart.interval().position('month*tem').color('tem', function (tem) { 519 | if (tem[1] >= tem[0]) { 520 | return 'red' 521 | } else { 522 | return 'green'; 523 | } 524 | }); 525 | chart.render(); 526 | 527 | }; 528 | 529 | //层叠柱状图 530 | exports.case9 = function (GM) { 531 | 532 | GM.Global.pixelRatio = 1; 533 | var data = [ 534 | {"time": "周一", "tem": 6.9, "city": "tokyo"}, 535 | {"time": "周二", "tem": 9.5, "city": "tokyo"}, 536 | {"time": "周三", "tem": 14.5, "city": "tokyo"}, 537 | {"time": "周四", "tem": 18.2, "city": "tokyo"}, 538 | {"time": "周五", "tem": 21.5, "city": "tokyo"}, 539 | {"time": "周六", "tem": 25.2, "city": "tokyo"}, 540 | {"time": "周日", "tem": 26.5, "city": "tokyo"}, 541 | {"time": "周一", "tem": 0.8, "city": "newYork"}, 542 | {"time": "周二", "tem": 5.7, "city": "newYork"}, 543 | {"time": "周三", "tem": 11.3, "city": "newYork"}, 544 | {"time": "周四", "tem": 17, "city": "newYork"}, 545 | {"time": "周五", "tem": 22, "city": "newYork"}, 546 | {"time": "周六", "tem": 24.8, "city": "newYork"}, 547 | {"time": "周日", "tem": 24.1, "city": "newYork"}, 548 | {"time": "周一", "tem": 0.6, "city": "berlin"}, 549 | {"time": "周二", "tem": 3.5, "city": "berlin"}, 550 | {"time": "周三", "tem": 8.4, "city": "berlin"}, 551 | {"time": "周四", "tem": 13.5, "city": "berlin"}, 552 | {"time": "周五", "tem": 17, "city": "berlin"}, 553 | {"time": "周六", "tem": 18.6, "city": "berlin"}, 554 | {"time": "周日", "tem": 17.9, "city": "berlin"} 555 | ]; 556 | var chart = new GM.Chart({ 557 | id: 'c1' 558 | }); 559 | chart.source(data, { 560 | tem: { 561 | tickCount: 5 562 | } 563 | }); 564 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 565 | chart.axis('time', { 566 | label: { 567 | fontSize: 14, 568 | fontFamily: "SimSun" 569 | }, 570 | grid: null 571 | }); 572 | chart.axis('tem', { 573 | label: { 574 | fontSize: 14, 575 | fontFamily: "sans-serif" 576 | } 577 | }); 578 | chart.intervalStack().position('time*tem').color('city'); 579 | chart.render(); 580 | 581 | }; 582 | 583 | 584 | //玉玦图 585 | exports.case10 = function (GM) { 586 | 587 | GM.Global.pixelRatio = 1; 588 | var data = [ 589 | {"tem": 7, "city": "tokyo"}, 590 | {"tem": 4, "city": "newYork"}, 591 | {"tem": 3, "city": "berlin"} 592 | ]; 593 | var chart = new GM.Chart({ 594 | id: 'c1' 595 | }); 596 | chart.source(data, { 597 | tem: { 598 | min: 0, 599 | max: 10 600 | } 601 | }); 602 | chart.axis(false); 603 | chart.coord('polar', { 604 | transposed: true, 605 | inner: 0.5 606 | }); 607 | chart.interval().position('city*tem').color('city'); 608 | chart.render(); 609 | 610 | }; 611 | 612 | //自定义shape的柱状图 613 | exports.case11 = function (GM) { 614 | 615 | GM.Global.pixelRatio = 1; 616 | var data = [ 617 | {"tem": 500, "city": "一月"}, 618 | {"tem": -50, "city": "二月"}, 619 | {"tem": 450, "city": "五月"}, 620 | {"tem": -40, "city": "六月"}, 621 | {"tem": 690, "city": "七月"}, 622 | {"tem": 346, "city": "八月"}, 623 | ]; 624 | var drawShape = function (points, canvas, cfg) { 625 | var ctx = canvas.getContext('2d'); 626 | ctx.beginPath(); 627 | ctx.moveTo(points[0].x, points[0].y); 628 | if (points.length > 1) { 629 | for (var i = 1; i <= points.length - 1; i++) { 630 | ctx.lineTo(points[i].x, points[i].y); 631 | } 632 | } 633 | ctx.fillStyle = cfg.fill; 634 | ctx.fill(); 635 | }; 636 | //自定义绘制数据的的形状 637 | var Shape = GM.Shape; 638 | Shape.registShape('interval', 'polygon', { 639 | getShapePoints: function (cfg) { 640 | var x = cfg.x; 641 | var y = cfg.y; 642 | var y0 = cfg.y0; 643 | var width = cfg.size; 644 | return [ 645 | {x: x - width / 2, y: y0}, 646 | {x: x, y: y}, 647 | {x: x + width / 2, y: y0} 648 | ]; 649 | }, 650 | drawShape: function (cfg, canvas) { 651 | var points = this.parsePoints(cfg.points); 652 | var style = cfg.style || {}; 653 | style.fill = cfg.color; 654 | drawShape(points, canvas, style); 655 | } 656 | }); 657 | var chart = new GM.Chart({ 658 | id: 'c1' 659 | }); 660 | chart.source(data, { 661 | tem: { 662 | tickCount: 5, 663 | } 664 | }); 665 | chart.axis('city', { 666 | label: { 667 | fontSize: 14, 668 | fontFamily: 'SimSun' 669 | }, 670 | line: null, 671 | grid: null 672 | }); 673 | chart.axis('tem', { 674 | label: { 675 | fontSize: 14, 676 | fontFamily: 'sans-serif' 677 | }, 678 | grid: { 679 | stroke: '#f8f8f8', 680 | } 681 | }); 682 | chart.interval().position('city*tem').color('tem*city', function (tem, city) { 683 | if (city === '八月') { 684 | return '#f5623a'; 685 | } 686 | if (tem >= 0) { 687 | return '#f8bdad'; 688 | } 689 | if (tem < 0) { 690 | return '#99d6c0'; 691 | } 692 | }).shape('polygon'); 693 | // 绘制数据 694 | chart.render(); 695 | 696 | }; 697 | 698 | //饼图 699 | exports.case12 = function (GM) { 700 | 701 | GM.Global.pixelRatio = 1; 702 | var data = [ 703 | {a: '1', b: 0.3, c: '1'}, 704 | {a: '1', b: 0.3, c: '2'}, 705 | {a: '1', b: 0.4, c: '3'} 706 | ]; 707 | var chart = new GM.Chart({ 708 | id: 'c1' 709 | }); 710 | chart.source(data); 711 | chart.coord('polar', { 712 | transposed: true, 713 | inner: 0 714 | }); 715 | chart.axis(false); 716 | chart.intervalStack().position('a*b').color('c'); 717 | chart.render(); 718 | 719 | }; 720 | 721 | //嵌套饼图 722 | exports.case13 = function (GM) { 723 | 724 | 725 | GM.Global.pixelRatio = 1; 726 | var data = [ 727 | {a: '1', b: 0.2, c: '1'}, 728 | {a: '2', b: 0.5, c: '1'}, 729 | {a: '3', b: 0.4, c: '1'}, 730 | {a: '1', b: 0.8, c: '2'}, 731 | {a: '2', b: 0.5, c: '2'}, 732 | {a: '3', b: 0.6, c: '2'} 733 | ]; 734 | var chart = new GM.Chart({ 735 | id: 'c1' 736 | }); 737 | chart.source(data); 738 | chart.coord('polar', { 739 | transposed: true, 740 | inner: 0.5 741 | }); 742 | chart.axis(false); 743 | chart.intervalStack().position('a*b').color('c'); 744 | chart.render(); 745 | 746 | 747 | }; 748 | 749 | //玫瑰饼图 750 | exports.case14 = function (GM) { 751 | 752 | 753 | GM.Global.pixelRatio = 1; 754 | var data = [ 755 | {"tem": 7, "city": "tokyo"}, 756 | {"tem": 4, "city": "newYork"}, 757 | {"tem": 3, "city": "berlin"} 758 | ]; 759 | var chart = new GM.Chart({ 760 | id: 'c1' 761 | }); 762 | chart.source(data, { 763 | tem: { 764 | min: 0, 765 | nice: false 766 | } 767 | }); 768 | chart.coord('polar', { 769 | inner: 0 770 | }); 771 | chart.axis(false); 772 | chart.interval().position('city*tem').color('city'); 773 | chart.render(); 774 | 775 | 776 | }; 777 | 778 | //雷达图 779 | exports.case15 = function (GM) { 780 | 781 | 782 | GM.Global.pixelRatio = 1; 783 | var data = [ 784 | {name: '张飞', props: '智力', value: 65}, 785 | {name: '张飞', props: '武力', value: 97}, 786 | {name: '张飞', props: '政治', value: 50}, 787 | {name: '张飞', props: '统帅', value: 92}, 788 | {name: '张飞', props: '忠诚', value: 100}, 789 | {name: '关羽', props: '智力', value: 80}, 790 | {name: '关羽', props: '武力', value: 94}, 791 | {name: '关羽', props: '政治', value: 70}, 792 | {name: '关羽', props: '统帅', value: 95}, 793 | {name: '关羽', props: '忠诚', value: 99} 794 | ]; 795 | var chart = new GM.Chart({ 796 | id: 'c1' 797 | }); 798 | chart.coord('polar'); 799 | chart.source(data, { 800 | value: { 801 | min: 0, 802 | tickInterval: 20 803 | } 804 | }); 805 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 806 | chart.axis('props', { 807 | label: { 808 | fontSize: 14, 809 | fontFamily: "SimSun" 810 | }, 811 | line: null 812 | }); 813 | chart.axis('value', { 814 | label: { 815 | fontSize: 14, 816 | fontFamily: "sans-serif" 817 | } 818 | }); 819 | chart.line().position('props*value').color('name'); 820 | chart.render(); 821 | 822 | 823 | }; 824 | 825 | //带缩放动画的区域雷达图 826 | exports.case16 = function (GM) { 827 | 828 | GM.Global.pixelRatio = 1; 829 | var data = [ 830 | {name: '张飞', props: '智力', value: 65}, 831 | {name: '张飞', props: '武力', value: 97}, 832 | {name: '张飞', props: '政治', value: 50}, 833 | {name: '张飞', props: '统帅', value: 92}, 834 | {name: '张飞', props: '忠诚', value: 100}, 835 | {name: '关羽', props: '智力', value: 80}, 836 | {name: '关羽', props: '武力', value: 94}, 837 | {name: '关羽', props: '政治', value: 70}, 838 | {name: '关羽', props: '统帅', value: 95}, 839 | {name: '关羽', props: '忠诚', value: 99} 840 | ]; 841 | var chart = new GM.Chart({ 842 | id: 'c1' 843 | }); 844 | chart.coord('polar'); 845 | chart.source(data, { 846 | value: { 847 | min: 0, 848 | tickInterval: 20 849 | } 850 | }); 851 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 852 | chart.axis('props', { 853 | label: { 854 | fontSize: 14, 855 | fontFamily: "SimSun" 856 | }, 857 | line: null 858 | }); 859 | chart.axis('value', { 860 | label: { 861 | fontSize: 14, 862 | fontFamily: "sans-serif" 863 | } 864 | }); 865 | chart.area().position('props*value').color('name').style({ 866 | opacity: 0.6 867 | }); 868 | // x和y轴同时缩放的动画 869 | // chart.animate().scalexy(); 870 | chart.render(); 871 | 872 | } 873 | 874 | //股票图 875 | exports.case17 = function (GM) { 876 | 877 | var Util = GM.Util; 878 | GM.Global.pixelRatio = 1; 879 | //获取本地数据 880 | var data = [ 881 | { 882 | time: "2015-11-19", 883 | start: 8.18, 884 | max: 8.33, 885 | min: 7.98, 886 | end: 8.32, 887 | volumn: 1810, 888 | money: 14723.56 889 | }, 890 | { 891 | time: "2015-11-18", 892 | start: 8.37, 893 | max: 8.6, 894 | min: 8.03, 895 | end: 8.09, 896 | volumn: 2790.37, 897 | money: 23309.19 898 | }, 899 | { 900 | time: "2015-11-17", 901 | start: 8.7, 902 | max: 8.78, 903 | min: 8.32, 904 | end: 8.37, 905 | volumn: 3729.04, 906 | money: 31709.71 907 | }, 908 | { 909 | time: "2015-11-16", 910 | start: 8.18, 911 | max: 8.69, 912 | min: 8.05, 913 | end: 8.62, 914 | volumn: 3095.44, 915 | money: 26100.69 916 | }, 917 | { 918 | time: "2015-11-13", 919 | start: 8.01, 920 | max: 8.75, 921 | min: 7.97, 922 | end: 8.41, 923 | volumn: 5815.58, 924 | money: 48562.37 925 | }, 926 | { 927 | time: "2015-11-12", 928 | start: 7.76, 929 | max: 8.18, 930 | min: 7.61, 931 | end: 8.15, 932 | volumn: 4742.6, 933 | money: 37565.36 934 | }, 935 | { 936 | time: "2015-11-11", 937 | start: 7.55, 938 | max: 7.81, 939 | min: 7.49, 940 | end: 7.8, 941 | volumn: 3133.82, 942 | money: 24065.42 943 | }, 944 | { 945 | time: "2015-11-10", 946 | start: 7.5, 947 | max: 7.68, 948 | min: 7.44, 949 | end: 7.57, 950 | volumn: 2670.35, 951 | money: 20210.58 952 | }, 953 | { 954 | time: "2015-11-09", 955 | start: 7.65, 956 | max: 7.66, 957 | min: 7.3, 958 | end: 7.58, 959 | volumn: 2841.79, 960 | money: 21344.36 961 | }, 962 | { 963 | time: "2015-11-06", 964 | start: 7.52, 965 | max: 7.71, 966 | min: 7.48, 967 | end: 7.64, 968 | volumn: 2725.44, 969 | money: 20721.51 970 | }, 971 | { 972 | time: "2015-11-05", 973 | start: 7.48, 974 | max: 7.57, 975 | min: 7.29, 976 | end: 7.48, 977 | volumn: 3520.85, 978 | money: 26140.83 979 | }, 980 | { 981 | time: "2015-11-04", 982 | start: 7.01, 983 | max: 7.5, 984 | min: 7.01, 985 | end: 7.46, 986 | volumn: 3591.47, 987 | money: 26285.52 988 | }, 989 | { 990 | time: "2015-11-03", 991 | start: 7.1, 992 | max: 7.17, 993 | min: 6.82, 994 | end: 7, 995 | volumn: 2029.21, 996 | money: 14202.33 997 | }, 998 | { 999 | time: "2015-11-02", 1000 | start: 7.09, 1001 | max: 7.44, 1002 | min: 6.93, 1003 | end: 7.17, 1004 | volumn: 3191.31, 1005 | money: 23205.11 1006 | }, 1007 | { 1008 | time: "2015-10-30", 1009 | start: 6.98, 1010 | max: 7.27, 1011 | min: 6.84, 1012 | end: 7.18, 1013 | volumn: 3522.61, 1014 | money: 25083.44 1015 | }, 1016 | { 1017 | time: "2015-10-29", 1018 | start: 6.94, 1019 | max: 7.2, 1020 | min: 6.8, 1021 | end: 7.05, 1022 | volumn: 2752.27, 1023 | money: 19328.44 1024 | }, 1025 | { 1026 | time: "2015-10-28", 1027 | start: 7.01, 1028 | max: 7.14, 1029 | min: 6.8, 1030 | end: 6.85, 1031 | volumn: 2311.11, 1032 | money: 16137.32 1033 | }, 1034 | { 1035 | time: "2015-10-27", 1036 | start: 6.91, 1037 | max: 7.31, 1038 | min: 6.48, 1039 | end: 7.18, 1040 | volumn: 3172.9, 1041 | money: 21827.3 1042 | }, 1043 | { 1044 | time: "2015-10-26", 1045 | start: 6.9, 1046 | max: 7.08, 1047 | min: 6.87, 1048 | end: 6.95, 1049 | volumn: 2769.31, 1050 | money: 19337.44 1051 | }, 1052 | { 1053 | time: "2015-10-23", 1054 | start: 6.71, 1055 | max: 6.85, 1056 | min: 6.58, 1057 | end: 6.79, 1058 | volumn: 2483.18, 1059 | money: 16714.31 1060 | }, 1061 | { 1062 | time: "2015-10-22", 1063 | start: 6.38, 1064 | max: 6.67, 1065 | min: 6.34, 1066 | end: 6.65, 1067 | volumn: 2225.88, 1068 | money: 14465.56 1069 | }, 1070 | { 1071 | time: "2015-10-21", 1072 | start: 7.08, 1073 | max: 7.1, 1074 | min: 6.41, 1075 | end: 6.41, 1076 | volumn: 2891.47, 1077 | money: 19585.98 1078 | }, 1079 | { 1080 | time: "2015-10-20", 1081 | start: 6.88, 1082 | max: 7.19, 1083 | min: 6.85, 1084 | end: 7.12, 1085 | volumn: 2389.62, 1086 | money: 16813.58 1087 | }, 1088 | { 1089 | time: "2015-10-19", 1090 | start: 7.1, 1091 | max: 7.14, 1092 | min: 6.8, 1093 | end: 6.94, 1094 | volumn: 2786.61, 1095 | money: 19474.72 1096 | }, 1097 | { 1098 | time: "2015-10-16", 1099 | start: 6.92, 1100 | max: 7.38, 1101 | min: 6.73, 1102 | end: 7.15, 1103 | volumn: 3289.27, 1104 | money: 22963.97 1105 | }, 1106 | { 1107 | time: "2015-10-15", 1108 | start: 6.63, 1109 | max: 6.9, 1110 | min: 6.6, 1111 | end: 6.89, 1112 | volumn: 2440.37, 1113 | money: 16575.84 1114 | } 1115 | ]; 1116 | //数据处理 1117 | data.sort(function (obj1, obj2) { 1118 | return obj1.time > obj2.time ? 1 : -1; 1119 | }); 1120 | data.forEach(function (obj) { 1121 | obj.range = [obj.start, obj.end, obj.max, obj.min]; 1122 | obj.trend = (obj.start <= obj.end) ? 0 : 1; 1123 | }); 1124 | var chart = new GM.Chart({ 1125 | id: 'c1' 1126 | }); 1127 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 1128 | chart.axis('range', { 1129 | label: { 1130 | fontSize: 14, 1131 | fontFamily: "sans-serif" 1132 | } 1133 | }); 1134 | //配置time刻度文字样式 1135 | var label = { 1136 | fill: '#979797', 1137 | font: '14px sans-serif', 1138 | offset: 6 1139 | }; 1140 | chart.axis('time', { 1141 | label: function (text, index, total) { 1142 | var cfg = Util.mix({}, label); 1143 | // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐 1144 | if (index === 0) { 1145 | cfg.textAlign = 'start'; 1146 | } 1147 | if (index > 0 && index === total - 1) { 1148 | cfg.textAlign = 'end'; 1149 | } 1150 | return cfg; 1151 | } 1152 | }); 1153 | chart.source(data, { 1154 | range: { 1155 | tickCount: 5 1156 | }, 1157 | time: { 1158 | tickCount: 3 1159 | } 1160 | }); 1161 | chart.schema().position('time*range') 1162 | .color('trend', function (trend) { 1163 | return ['#C00000', '#19B24B'][trend]; 1164 | }) 1165 | .shape('candle'); 1166 | chart.render(); 1167 | 1168 | }; 1169 | 1170 | //双 Y 轴 1171 | exports.case18 = function (GM) { 1172 | GM.Global.pixelRatio = 1; 1173 | var data = [ 1174 | {"time": "周一", "tem": 6.9, "rain": 10}, 1175 | {"time": "周二", "tem": 9.5, "rain": 13}, 1176 | {"time": "周三", "tem": 14.5, "rain": 14}, 1177 | {"time": "周四", "tem": 18.2, "rain": 10}, 1178 | {"time": "周五", "tem": 21.5, "rain": 12}, 1179 | {"time": "周六", "tem": 25.2, "rain": 16}, 1180 | {"time": "周日", "tem": 26.5, "rain": 13}, 1181 | ]; 1182 | var chart = new GM.Chart({ 1183 | id: 'c1' 1184 | }); 1185 | chart.source(data, { 1186 | tem: { 1187 | tickCount: 5, 1188 | max: 30, 1189 | min: 0 1190 | }, 1191 | rain: { 1192 | tickCount: 5, 1193 | min: 0 1194 | } 1195 | }); 1196 | //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) 1197 | chart.axis('time', { 1198 | label: { 1199 | fontSize: 14, 1200 | fontFamily: "SimSun" 1201 | }, 1202 | grid: null 1203 | }); 1204 | chart.axis('tem', { 1205 | label: { 1206 | fontSize: 14, 1207 | fontFamily: "sans-serif" 1208 | } 1209 | }); 1210 | chart.axis('rain', { 1211 | label: { 1212 | fontSize: 14, 1213 | fontFamily: "sans-serif" 1214 | } 1215 | }); 1216 | chart.interval().position('time*tem'); 1217 | chart.line().position('time*rain').color('#5ed470').size(2).shape('smooth'); 1218 | chart.point().position('time*rain').color('#5ed470'); 1219 | chart.render(); 1220 | }; 1221 | 1222 | exports.case19 = function (GM) { 1223 | 1224 | 1225 | GM.Global.pixelRatio = 1;//双精度 1226 | var Shape = GM.Shape; 1227 | var G = GM.G; 1228 | var data = [{pointer: '当前收益', value: 5, length: 2, y: 1.05}]; 1229 | //自定义绘制数据的的形状 1230 | Shape.registShape('point', 'dashBoard', { 1231 | getShapePoints: function (cfg) { 1232 | var x = cfg.x; 1233 | var y = cfg.y; 1234 | return [ 1235 | {x: x, y: y}, 1236 | {x: x, y: 0.5} 1237 | ] 1238 | }, 1239 | drawShape: function (cfg, canvas) { 1240 | var point1 = cfg.points[0]; 1241 | var point2 = cfg.points[1]; 1242 | point1 = this.parsePoint(point1); 1243 | point2 = this.parsePoint(point2); 1244 | G.drawLines([point1, point2], canvas, { 1245 | stroke: '#18b7d6', 1246 | lineWidth: 2 1247 | }); 1248 | var text = cfg.origin._origin.value.toString(); 1249 | G.drawText(text + '%', cfg.center, canvas, { 1250 | fillStyle: '#f75b5b', 1251 | font: '30px serif', 1252 | textAlign: 'center', 1253 | textBaseline: 'bottom' 1254 | }); 1255 | G.drawText(cfg.origin._origin.pointer, cfg.center, canvas, { 1256 | fillStyle: '#ccc', 1257 | font: '30px SimSun', 1258 | textAlign: 'center', 1259 | textBaseline: 'top' 1260 | }); 1261 | } 1262 | }); 1263 | var chart = new GM.Chart({ 1264 | id: 'c1' 1265 | }); 1266 | chart.source(data, { 1267 | 'value': {type: 'linear', min: 0, max: 15, tickCount: 6}, 1268 | 'length': {type: 'linear', min: 0, max: 10}, 1269 | y: {type: 'linear', min: 0, max: 1} 1270 | }); 1271 | chart.coord('polar', { 1272 | inner: 0, 1273 | startAngle: -1.25 * Math.PI, 1274 | endAngle: 0.25 * Math.PI 1275 | }); 1276 | //配置value轴刻度线 1277 | chart.axis('value', { 1278 | tickLine: { 1279 | strokeStyle: '#b9e6ef', 1280 | lineWidth: 2, 1281 | value: -5 1282 | }, 1283 | //label: null, 1284 | label: { 1285 | fontSize: 14, 1286 | fontFamily: "serif" 1287 | }, 1288 | grid: null, 1289 | line: null 1290 | }); 1291 | chart.axis('y', false); 1292 | //绘制仪表盘辅助元素 1293 | chart.guide().arc([0, 1.05], [4.8, 1.05], { 1294 | strokeStyle: '#18b7d6', 1295 | lineWidth: 5, 1296 | lineCap: 'round' 1297 | }); 1298 | chart.guide().arc([5.2, 1.05], [9.8, 1.05], { 1299 | strokeStyle: '#ccc', 1300 | lineWidth: 5, 1301 | lineCap: 'round' 1302 | }); 1303 | chart.guide().arc([10.2, 1.05], [15, 1.05], { 1304 | strokeStyle: '#ccc', 1305 | lineWidth: 5, 1306 | lineCap: 'round' 1307 | }); 1308 | chart.guide().arc([0, 1.2], [15, 1.2], { 1309 | strokeStyle: '#ccc', 1310 | lineWidth: 1 1311 | }); 1312 | chart.guide().text([-0.5, 1.3], '0.00%', { 1313 | fillStyle: '#ccc', 1314 | font: '18px serif', 1315 | textAlign: 'center' 1316 | }); 1317 | chart.guide().text([7.5, 0.7], '7.50%', { 1318 | fillStyle: '#ccc', 1319 | font: '18px serif', 1320 | textAlign: 'center' 1321 | }); 1322 | chart.guide().text([15.5, 1.3], '15.00%', { 1323 | fillStyle: '#ccc', 1324 | font: '18px serif', 1325 | textAlign: 'center' 1326 | }); 1327 | chart.point().position('value*y').size('length').color('#18b7d6').shape('dashBoard'); 1328 | chart.render(); 1329 | 1330 | 1331 | }; 1332 | 1333 | 1334 | //带缩放动画和自定义背景的柱状图 1335 | exports.case21 = function () { 1336 | 1337 | 1338 | }; 1339 | //带平铺动画的多类型线图 1340 | exports.case22 = function () { 1341 | }; 1342 | 1343 | //带缩放动画的横向柱状图 1344 | exports.case23 = function () { 1345 | }; 1346 | //带平铺动画的环形饼图 1347 | exports.case24 = function () { 1348 | 1349 | 1350 | }; 1351 | //带html辅助元素的折线图 1352 | exports.case25 = function (GM) { 1353 | }; -------------------------------------------------------------------------------- /examples/demo.we: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /examples/include/example-list-item.we: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 34 | -------------------------------------------------------------------------------- /examples/include/example-list.we: -------------------------------------------------------------------------------- 1 | 8 | 9 | 32 | 33 | 35 | -------------------------------------------------------------------------------- /examples/index.we: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | -------------------------------------------------------------------------------- /examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weex-chart-demo", 3 | "version": "0.0.1", 4 | "scripts":{ 5 | "start":"weex-devtool ./ -e index.we", 6 | "build":"weex-builder . dist" 7 | }, 8 | "dependencies":{ 9 | "weex-plugin-weex-chart":"*" 10 | }, 11 | "devDependencies":{ 12 | "weex-devtool":"*", 13 | "weex-builder":"*" 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /js/CanvasElement.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by godsong on 16/9/12. 3 | */ 4 | var Canvas = require('weex-gcanvas'); 5 | var _instanceMap = {}; 6 | function CanvasElement(weexElement, canvasId) { 7 | //g2竟然对canvas做深拷贝，用string 绕过他们类型检查的坑，无奈脸 8 | var instance = new String(); 9 | instance.weexElement = weexElement; 10 | if (_instanceMap[canvasId]) { 11 | instance.weexElement = _instanceMap[canvasId]; 12 | } 13 | else { 14 | _instanceMap[canvasId] = instance; 15 | } 16 | 17 | 18 | Object.defineProperties(instance, { 19 | 'currentStyle': { 20 | get: function () { 21 | return Object.assign({}, instance.weexElement.classStyle, instance.weexElement.style); 22 | } 23 | }, 24 | 'offsetWidth': { 25 | get: function () { 26 | var canvasWidth = parseFloat(instance.weexElement.classStyle['width'] || instance.weexElement.style['width']); 27 | return canvasWidth; 28 | //return parseFloat(weexElement.classStyle['width']||weexElement.style['width']) 29 | } 30 | }, 31 | 'offsetHeight': { 32 | get: function () { 33 | console.log('offsetHeight:', parseFloat(instance.weexElement.classStyle['height'] || instance.weexElement.style['height'])) 34 | return parseFloat(instance.weexElement.classStyle['height'] || instance.weexElement.style['height']) 35 | } 36 | } 37 | }); 38 | instance.getContext = function () { 39 | return Canvas.getContext('2d') 40 | }; 41 | return instance; 42 | } 43 | CanvasElement.init = function (element, canvasId) { 44 | //初始化canvas dom 并伪造getElementById和标准的getContext 45 | if (_instanceMap[canvasId]) { 46 | _instanceMap[canvasId].weexElement = element; 47 | } 48 | else { 49 | _instanceMap[canvasId] = element; 50 | } 51 | 52 | return new Promise(function (resolve) { 53 | Canvas.start(element.ref, function () { 54 | resolve(Canvas.getContext('2d')); 55 | 56 | }); 57 | }) 58 | }; 59 | 60 | CanvasElement.reset = function () { 61 | Canvas.disable(); 62 | }; 63 | module.exports = CanvasElement; 64 | -------------------------------------------------------------------------------- /js/chart.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by godsong on 16/12/12. 3 | */ 4 | var GM = require('g2-mobile'); 5 | var CanvasElement=require('./CanvasElement') 6 | var _ready = false; 7 | var _context; 8 | var _renderQueue = []; 9 | var _chartRender = GM.Chart.prototype.render; 10 | GM.Chart.prototype.render = function () { 11 | if (_ready) { 12 | _chartRender.call(this); 13 | _context.render(); 14 | } 15 | else { 16 | _renderQueue.push(this); 17 | } 18 | }; 19 | var G2Chart=GM.Chart; 20 | GM.Chart=function(config){ 21 | var canvasElement=new CanvasElement(); 22 | config.el=canvasElement; 23 | return new G2Chart(config); 24 | } 25 | module.exports = function (name) { 26 | switch (name.toLowerCase()) { 27 | case 'g2': 28 | return GM; 29 | case 'gm': 30 | return GM; 31 | default: 32 | return GM; 33 | } 34 | }; 35 | module.exports.ready = function (context,id,weexElement) { 36 | _ready = true; 37 | _context = context; 38 | var chart; 39 | if (_renderQueue.length > 0) { 40 | while (chart = _renderQueue.shift()) { 41 | _chartRender.call(chart); 42 | } 43 | context.render(); 44 | } 45 | }; -------------------------------------------------------------------------------- /js/chart.we: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by godsong on 16/11/3. 3 | */ 4 | 7 | 26 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by godsong on 16/12/12. 3 | */ 4 | require('./chart.we'); 5 | module.exports=require('./chart'); -------------------------------------------------------------------------------- /js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weex-chart", 3 | "version": "0.3.2", 4 | "description": "chart component for weex", 5 | "main": "index.js", 6 | "scripts": { 7 | "demo": "weex-devtool ./examples -e index.we -p 8888 --min" 8 | }, 9 | "platform": [ 10 | "Android", 11 | "iOS", 12 | "html5" 13 | ], 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "dependencies": { 18 | "g2-mobile": "2.1.13-beta", 19 | "weex-gcanvas": "^0.3.8" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /js/readme.md: -------------------------------------------------------------------------------- 1 | # 如何使用 2 | 首先 native端需要接入GCanvas,接入请参考[未完工]() 3 | ##### 安装 4 | ``` 5 | tnpm install @ali/weex-chart 6 | ``` 7 | ##### 引入方式 8 | ``` 9 | var GM=require('@ali/weex-chart')('g2');//这种方式引入是为了将来支持别的图标库 目前支持的是g2-mobile 10 | ``` 11 | ##### 使用方法 12 | 13 | 14 | # 如何运行demo 15 | ``` 16 | git clone git@gitlab.alibaba-inc.com:rex.gs/weex-chart.git 17 | cd weex-chart 18 | tnpm install 19 | npm run demo 20 | ``` 21 | 使用已编译过GCanvas的playground扫码 [下载地址](http://mtl.alibaba-inc.com/oss/mupp/36956/1965090/1965090/b222d12a5260eb64468b3f17e8458801/playground.apk?spm=0.0.0.0.3Bhk0l&file=playground.apk) 22 | 23 | 24 | `注意` 25 | examples的列表项 单击则进入尺寸不正常模式 长按则是进入尺寸正常的模式（for@凯冯@韦青） 26 | 27 | ##### 附1 28 | [tnpm如何安装](http://gitlab.alibaba-inc.com/liufeng.clf/tnpm) -------------------------------------------------------------------------------- /plugin.xml: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | 24 | weex-chart 25 | A chart component for weex 26 | Apache 2.0 27 | weex,plugin 28 | https://*.git 29 | https://* 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 简介 2 | 图表插件是通过g2-mobile依赖[gcanvas插件](../weex-plugin-gcanvas)实现的 3 | 4 | # 如何用[weexpack](https://github.com/weexteam/weex-pack)命令安装使用 5 | 6 | 目前图表和gcanvas插件已经上传weex插件市场，可以通过weexpack plugin命令安装使用 7 | 8 | 1.安装weexpack 9 | 10 | npm install -g weexpack 11 | 12 | 2.创建工程，比如myproj 13 | 14 | weexpack create myproj 15 | 16 | 3.创建运行平台 17 | 18 | cd myproj & weexpack platform add ios (需要android 则 weexpack platform add android) 19 | 20 | 4.添加图表插件 21 | 22 | weexpack plugin add weex-chart （会检测到依赖插件并自动添加） 23 | 24 | 5.编译和运行demo 25 | 26 | 把demo文件（位于本repo的 examples/下的所有文件 你可以clone一下）拷贝到项目工程目录的src下，然后： 27 | 28 | 然后使用命令：weexpack run ios (android) 可在模拟器或者device上运行 29 | 30 | # 用法及说明 31 | 32 | ```html 33 | 34 | ``` 35 | ``` 36 | var G2=require('weex-chart')('g2');//使用g2这个chart 目前只支持g2-mobile 37 | module.exports={ 38 | ready:function(){ 39 | var chart = new GM.Chart({ 40 | id: 'c1' 41 | }); 42 | ... 43 | chart.render() 44 | } 45 | } 46 | ``` 47 | 48 | G2-mobile语法请参照 49 | [g2-mobile](https://antv.alipay.com/g2-mobile/doc/index.html) 50 | 不支持内容 51 | 由于g2-mobile是给浏览器页面设计的 weex环境与浏览器环境有较大差异 因此一些g2-mobile的功能暂时无法支持,主要如下 52 | - `animate 动画` 53 | - `guide 辅助线` 54 | 55 | 如果您发现有别的特性或者api 无法支持 或者支持不好 请提交issue 谢谢 56 | 57 | 58 | # changelog 59 | 支持weex sdk 0.10.0 --------------------------------------------------------------------------------