More Related Content Similar to Yid1.5图表组件分享 (20) 3. YID Chart 一套用在网站上使用的数据图解决方案，用 Flash 开发 追求 好用、好看、简单 ， 以最佳体验表达数据。 YID = Y es I D esign! Y es I D evelop!... Y es I D o! 由阿里巴巴 UED 和前端开发团队以爱之心为网站倾情打造 。 6. YID1.0 图表简单回顾 1.0 图表 demo 可视化编辑器 http://share.aliued.cn/yid-chart-demo/v1/ http://share.aliued.cn/yid-chart-demo/v1/editor.html 20. 引入必要的 JS 类库 <!-- 依赖 js--> <script src=" http://style.china.alibaba.com/js/lib/fdev-v4/widget/ui/widget-min.js "></script> <!-- 主要功能 js--> <script src=" http://style.china.alibaba.com/js/lib/fdev-v4/widget/ui/flash-min.js "></script> <!--YID 组件 --> <script src=" http://style.china.alibaba.com/js/lib/fdev-v4/widget/ui/flash-chart-min.js "></script> 21. 书写 JS 代码配置必要的图表属性 jQuery.use('ui-flash,ui-flash-chart', function(){ $('#chart-container').flash( { module:‘chart’, 使用 chart 模块 type:‘line’, 指定图表类型 ,line,bar,pie, 可设置需要的图表版本，如需要 1.3 版本的，设置为 line-v1.3 width: 840, 设置 flash 容器大小 height: 400, flashvars: { cssUrl:‘’, css,data 数据地址 dataUrl:’’, chartWidth:600, 设置图表大小 chartHeight:350 } }); }); 22. Flashvars 参数 参数都经过 flashvars 从 HTML 传递到 flash 参数 说明 w 或 chartWidth 图表内容宽度 h 或 chartHeight 图表内容高度 data 数据内容 dataUrl 数据文件路径 charset 数据文件的编码 css 样式设置 cssUrl 样式文件路径 cssCharset 样式文件的编码 startDelay 图表初始化延迟毫秒数 23. XML 文件 jQuery.use('ui-flash,ui-flash-chart', function(){ $('#chart-container').flash( { module:‘chart’, type:‘line’, width: 840, height: 400, allowScriptAccess: 'always', flashvars: { dataUrl:’ data-xml-fc-single.txt’ } }); }); 25. CSS 文件 jQuery.use('ui-flash,ui-flash-chart', function(){ $('#chart-container').flash( { module:‘chart’, type:‘line’, width: 840, height: 400, allowScriptAccess: 'always', flashvars: { cssUrl: 'data-xml-fc-single.css' } }); }); 27. 利用 YID Chart 的接口 加载 或 解析 数据 或 样式 loadCSS parseCSS load parse 28. 接口调用代码示例 load public function load(url:String, charset:String=null):void jQuery(function($){ $.use('ui-flash,ui-flash-chart', function(){ var chart = $('#yidchart').flash({ … }); chart.bind('swfReady.flash',function(){ chart.flash('load','data/site-reffers.xml'); }) }); 29. 接口调用代码示例 public function loadCSS (url:String, charset:String = null, toAppend:Boolean = false ):void jQuery(function($){ $.use('ui-flash,ui-flash-chart', function(){ var chart = $('#yidchart').flash({ … }); chart.bind('swfReady.flash',function(){ chart.flash('loadCSS','css/pie-solid.css'); }) }); loadCSS 30. 接口调用代码示例 public function parse(src:String):void var dataStr = ‘<chart><data>…</data></chart>’; jQuery(function($){ $.use('ui-flash,ui-flash-chart', function(){ var chart = $('#yidchart').flash({ … }); chart.bind('swfReady.flash',function(){ chart.flash('parse',dataStr); }) }); parse 31. 接口调用代码示例 public function parseCSS (src:String, toAppend:Boolean=false):void var cssStr = ‘chart {…}; jQuery(function($){ $.use('ui-flash,ui-flash-chart', function(){ var chart = $('#yidchart').flash({ … }); chart.bind('swfReady.flash',function(){ chart.flash('parseCSS',cssStr); }) }); parseCSS Editor's Notes 问下使用过 YID 图表、编辑器的情况，以及使用感受。 好用：前端最关心，简单配置就能使用。 好看：设计师最关心。 谈谈我们的开发过程，交互设计、视觉设计、前端开发，讨论细节，修改问题。 虽然只有少少的三种图表，但这三种图表恰恰是使用率最高的三种图表，比如 work 平台中的折线图使用比率较高。 我们的目标是把图表最精最细，保持好用、好看、简单的特性。 Apple 的用户体验。简单的设计，简单的任务管理 打开 1.5 的 demo ，结合例子，述说新的改进，说说与其他图表的不同，我们的优点。
![[object Object],[object Object],[object Object],[object Object],[object Object],内容提要](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)