Your SlideShare is downloading. ×
0
t YID1.5 图表组件 prepared by jianping.shenjp
<ul><li>YID 图表简单介绍 </li></ul><ul><li>1.0 版本回顾 </li></ul><ul><li>1.5 版本介绍 </li></ul><ul><li>图表使用方法介绍 </li></ul><ul><li>图表后期...
YID Chart 一套用在网站上使用的数据图解决方案,用 Flash 开发 追求   好用、好看、简单 , 以最佳体验表达数据。 YID  =  Y es  I   D esign!  Y es  I   D evelop!...  Y es...
YID Chart  是一套
YID 图表目前支持的图表类型:
YID1.0 图表简单回顾 1.0 图表 demo 可视化编辑器 http://share.aliued.cn/yid-chart-demo/v1/ http://share.aliued.cn/yid-chart-demo/v1/editor...
目前使用 YID 图表的项目 <ul><li>精准营销 - 访客分析 </li></ul>
目前使用 YID 图表的项目 <ul><li>DCMS </li></ul>
目前使用 YID 图表的项目 <ul><li>WORK 平台 </li></ul>
 
1.5 版本中我们的改进:
1.5 版本中我们的改进:
1.5 版本中我们的改进:
1.5 版本中我们的改进:
1.5 版本中我们的改进:
Demo http://fd.aliued.cn/yid/compare_index.html
目前的成果 图表 1.5demo http://share.aliued.cn/yid-chart-demo/v1.5/
1.0 转换到 1.5 版本的成本 1.5  可以从 1.0 无缝接入
如何使用图表 <ul><li>引入必要的 JS 类库 </li></ul><ul><li>书写 JS 代码配置必要的图表属性 </li></ul>
引入必要的 JS 类库 <!-- 依赖 js--> <script src=&quot; http://style.china.alibaba.com/js/lib/fdev-v4/widget/ui/widget-min.js &quot;>...
书写 JS 代码配置必要的图表属性 jQuery.use('ui-flash,ui-flash-chart', function(){ $('#chart-container').flash( {    module:‘chart’, 使用 c...
Flashvars 参数 参数都经过 flashvars 从 HTML 传递到 flash 参数 说明 w  或  chartWidth 图表内容宽度 h  或  chartHeight 图表内容高度 data 数据内容 dataUrl 数据文...
XML 文件 jQuery.use('ui-flash,ui-flash-chart', function(){ $('#chart-container').flash( {  module:‘chart’,   type:‘line’, wi...
XML 字符串 <ul><li>jQuery.use('ui-flash,ui-flash-chart', function(){ </li></ul><ul><li>$('#chart-container').flash( </li></ul...
CSS 文件 jQuery.use('ui-flash,ui-flash-chart', function(){ $('#chart-container').flash( {  module:‘chart’,   type:‘line’, wi...
CSS 字符串 <ul><li>jQuery.use('ui-flash,ui-flash-chart', function(){ </li></ul><ul><li>$('#chart-container').flash( </li></ul...
利用 YID Chart 的接口 加载 或 解析 数据 或 样式 loadCSS parseCSS load parse
接口调用代码示例 load public function load(url:String, charset:String=null):void jQuery(function($){ $.use('ui-flash,ui-flash-char...
接口调用代码示例 public function loadCSS (url:String, charset:String = null, toAppend:Boolean = false ):void jQuery(function($){ $...
接口调用代码示例 public function parse(src:String):void var dataStr = ‘<chart><data>…</data></chart>’; jQuery(function($){ $.use('...
接口调用代码示例 public function parseCSS (src:String, toAppend:Boolean=false):void var cssStr   = ‘chart {…}’; jQuery(function($)...
接下来的工作 <ul><li>可视化编辑器 1.5 </li></ul><ul><li>完善相关文档 </li></ul><ul><li>进一步的推广工作 , 开源 , 网站 , 微博等 </li></ul>
 
 
Upcoming SlideShare
Loading in...5
×

Yid1.5图表组件分享

484

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
484
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 问下使用过 YID 图表、编辑器的情况,以及使用感受。
  • 好用:前端最关心,简单配置就能使用。 好看:设计师最关心。
  • 谈谈我们的开发过程,交互设计、视觉设计、前端开发,讨论细节,修改问题。
  • 虽然只有少少的三种图表,但这三种图表恰恰是使用率最高的三种图表,比如 work 平台中的折线图使用比率较高。 我们的目标是把图表最精最细,保持好用、好看、简单的特性。
  • Apple 的用户体验。简单的设计,简单的任务管理
  • 打开 1.5 的 demo ,结合例子,述说新的改进,说说与其他图表的不同,我们的优点。
  • Transcript of "Yid1.5图表组件分享"

    1. 1. t YID1.5 图表组件 prepared by jianping.shenjp
    2. 2. <ul><li>YID 图表简单介绍 </li></ul><ul><li>1.0 版本回顾 </li></ul><ul><li>1.5 版本介绍 </li></ul><ul><li>图表使用方法介绍 </li></ul><ul><li>图表后期计划 </li></ul>内容提要
    3. 3. YID Chart 一套用在网站上使用的数据图解决方案,用 Flash 开发 追求 好用、好看、简单 , 以最佳体验表达数据。 YID =  Y es  I   D esign!  Y es  I   D evelop!...  Y es  I   D o! 由阿里巴巴 UED 和前端开发团队以爱之心为网站倾情打造 。
    4. 4. YID Chart 是一套
    5. 5. YID 图表目前支持的图表类型:
    6. 6. YID1.0 图表简单回顾 1.0 图表 demo 可视化编辑器 http://share.aliued.cn/yid-chart-demo/v1/ http://share.aliued.cn/yid-chart-demo/v1/editor.html
    7. 7. 目前使用 YID 图表的项目 <ul><li>精准营销 - 访客分析 </li></ul>
    8. 8. 目前使用 YID 图表的项目 <ul><li>DCMS </li></ul>
    9. 9. 目前使用 YID 图表的项目 <ul><li>WORK 平台 </li></ul>
    10. 11. 1.5 版本中我们的改进:
    11. 12. 1.5 版本中我们的改进:
    12. 13. 1.5 版本中我们的改进:
    13. 14. 1.5 版本中我们的改进:
    14. 15. 1.5 版本中我们的改进:
    15. 16. Demo http://fd.aliued.cn/yid/compare_index.html
    16. 17. 目前的成果 图表 1.5demo http://share.aliued.cn/yid-chart-demo/v1.5/
    17. 18. 1.0 转换到 1.5 版本的成本 1.5 可以从 1.0 无缝接入
    18. 19. 如何使用图表 <ul><li>引入必要的 JS 类库 </li></ul><ul><li>书写 JS 代码配置必要的图表属性 </li></ul>
    19. 20. 引入必要的 JS 类库 <!-- 依赖 js--> <script src=&quot; http://style.china.alibaba.com/js/lib/fdev-v4/widget/ui/widget-min.js &quot;></script> <!-- 主要功能 js--> <script src=&quot; http://style.china.alibaba.com/js/lib/fdev-v4/widget/ui/flash-min.js &quot;></script> <!--YID 组件 --> <script src=&quot; http://style.china.alibaba.com/js/lib/fdev-v4/widget/ui/flash-chart-min.js &quot;></script>
    20. 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 } }); });
    21. 22. Flashvars 参数 参数都经过 flashvars 从 HTML 传递到 flash 参数 说明 w 或 chartWidth 图表内容宽度 h 或 chartHeight 图表内容高度 data 数据内容 dataUrl 数据文件路径 charset 数据文件的编码 css 样式设置 cssUrl 样式文件路径 cssCharset 样式文件的编码 startDelay 图表初始化延迟毫秒数
    22. 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’ } }); });
    23. 24. XML 字符串 <ul><li>jQuery.use('ui-flash,ui-flash-chart', function(){ </li></ul><ul><li>$('#chart-container').flash( </li></ul><ul><li>{ </li></ul><ul><li>module:‘chart’, </li></ul><ul><li> type:‘line’, </li></ul><ul><li>width: 840, </li></ul><ul><li>height: 400, </li></ul><ul><li>allowScriptAccess: 'always', </li></ul><ul><li>flashvars: { </li></ul><ul><li>data: encodeURIComponent( </li></ul><ul><ul><ul><ul><li>‘ <chart>…</chart>‘ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>) </li></ul></ul></ul></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
    24. 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' } }); });
    25. 26. CSS 字符串 <ul><li>jQuery.use('ui-flash,ui-flash-chart', function(){ </li></ul><ul><li>$('#chart-container').flash( </li></ul><ul><li>{ </li></ul><ul><li>module:‘chart’, </li></ul><ul><li> type:‘line’, </li></ul><ul><li>width: 840, </li></ul><ul><li>height: 400, </li></ul><ul><li>allowScriptAccess: 'always', </li></ul><ul><li>flashvars: { </li></ul><ul><ul><ul><li> css: ‘ chart { </li></ul></ul></ul><ul><ul><ul><li>width: 500; </li></ul></ul></ul><ul><ul><ul><li>height: 500; </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li> ' </li></ul></ul></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
    26. 27. 利用 YID Chart 的接口 加载 或 解析 数据 或 样式 loadCSS parseCSS load parse
    27. 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'); }) });
    28. 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
    29. 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
    30. 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
    31. 32. 接下来的工作 <ul><li>可视化编辑器 1.5 </li></ul><ul><li>完善相关文档 </li></ul><ul><li>进一步的推广工作 , 开源 , 网站 , 微博等 </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×