1. t YID 图表组件 prepared by jianping.shenjp

4. 总而言之 YID Chart 是一套

5. 目前的成果 图表 demo 可视化编辑器

7. 与线上现有图表比较 DEMO

8. 图表的配置 方式 1 ：兼容 Fusioncharts

9. var data = <graph>...</graph>; var chart = FD.widget.Flash.init(&quot;altContent&quot;, { width: 500, height: 400, url: &quot;fcf.swf&quot;, insert: false, allowScriptAccess: 'always', flashvars: { chartWidth: &quot;300&quot;, chartHeight: &quot;300&quot;, startDelay: 500, dataXML: encodeURIComponent(data) } }); var data = <graph>...</graph>; var css = ...; 增加 css 样式 var chart = FD.widget.Flash.init('altContent', { width: 500, height: 400, url: 'yid.swf', insert: false, allowScriptAccess: 'always', flashvars: { chartWidth : 300, chartHeight : 300, startDelay: 500, data:encodeURIComponent(data), css:css 将 css 样式赋给图表 } }); FusionChart 配置方式 YID 配置方式 修改 flash url 地址 数据属性由 dataXML 改为 data

10. 图表的配置 方式 2 ： YID Chart 方式

11. XML 文件 var chart = FD.widget.Flash.init(‘conntainer', { width: 700, height: 400, url: 'http://…./yid-chart-line-v1.0.swf', allowScriptAccess: 'always', flashvars: { startDelay: 500, dataUrl: 'data-xml-fc-single.txt' } });

12. XML 字符串 var chart = FD.widget.Flash.init(‘conntainer', { width: 700, height: 400, url: 'http://…./yid-chart-line-v1.0.swf', allowScriptAccess: 'always', flashvars: { startDelay: 500, data: encodeURIComponent( ‘ <chart>…</chart>‘ ) } });

13. CSS 文件 var chart = FD.widget.Flash.init(‘conntainer', { width: 700, height: 400, url: 'http://…./yid-chart-line-v1.0.swf', allowScriptAccess: 'always', flashvars: { startDelay: 500, data: ‘…’, cssUrl: 'data-xml-fc-single.css' } });

14. CSS 字符串 var chart = FD.widget.Flash.init(‘conntainer', { width: 700, height: 400, url: 'http://…./yid-chart-line-v1.0.swf', allowScriptAccess: 'always', flashvars: { startDelay: 500, data: ‘…’, css: ‘ chart { width: 500; height: 500; … ' } });

15. XML 数据中可以包含 CSS ，如： http://fd.aliued.cn/yid-chart/line-demo2.xml XML 可以换成等效 JSON ，如： http://fd.aliued.cn/yid-chart/line-demo3.json

16. 利用 YID Chart 的接口 加载 或 解析 数据 或 样式 loadCSS parseCSS load parse

17. 图表推广计划

18. YID 图表的展望