tYIDYID 图表组件图表组件

prepared by jianping.shenjpprepared by jianping.shenjp

项目中对图表的需求越来越多，越来越复杂，现有的免费或收费的图表组件，满足不了需求。自主开发、自主设计、自定视觉规范，满足项目需要。

YID 开发的背景：

总而言之 YID Chart 是一套

目前的成果

图表demo 可视化编辑器

与线上现有图表比较DEMO

图表的配置

方式 1 ：兼容Fusioncharts

var data = <graph>...</graph>;var chart = FD.widget.Flash.init("altContent", { width: 500, height: 400, url: "fcf.swf", insert: false, allowScriptAccess: 'always', flashvars: { chartWidth: "300", chartHeight: "300", 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

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

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' }});

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>‘ ) }});

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' }});

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; \ … ' }});

XML 数据中可以包含 CSS，如：http://fd.aliued.cn/yid-chart/line-demo2.xml

XML 可以换成等效 JSON，如： http://fd.aliued.cn/yid-chart/line-demo3.json

利用

YID Chart的接口加载或解析数据或样式

loadCSS parseCSS

loadparse

图表推广计划

YID 图表的展望