SpreadJS 使用 Wijmo5图表 示例

发布时间:2016/05/27 00:05 发布者:dexteryao

返回博客中心

 

SpreadJS很强大,Wijmo5也很强大,那么他们结合会产生什么神奇的效果呢?

C400.tmp

 

看着是不是很炫,其实几行代码搞定。

1. 初始化控件

var spread = new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 });
var chart = new wijmo.chart.FlexPie('#introChart');
var chartTypes = new wijmo.chart.FlexChart('#chartTypes');

 

2. 模拟数据

var data = [],
names = ['Oranges', 'Apples', 'Pears', 'Bananas', 'Pineapples'];
for (var i = 0; i < names.length; i++) {
  data.push({
    name: names[i],
    value: Math.round(Math.random() * 100)
  });
}

 

3. 绑定Spread

var colInfos = [
   { name: 'name', displayName: 'Display Name', size: 120 },
   { name: 'value', displayName: 'Display Value', size: 100, resizable: false },
];
var sheet = spread.getActiveSheet();
sheet.autoGenerateColumns = false;
sheet.setDataSource(data);
sheet.bindColumns(colInfos);

 

4.绑定图表

bindChart(data);
function bindChart(datasource){
	// initialize FlexPie's properties
	chart.beginUpdate();
	chart.binding = 'value';
	chart.bindingName = 'name';
	chart.itemsSource = new wijmo.collections.CollectionView(datasource);
	chart.header = 'Fruit By Value';
	chart.footer = '2016 GrapeCity; inc.';
	chart.endUpdate();
	chartTypes.initialize({
	  itemsSource: datasource,
	  bindingX: 'name',
	  series: [
	    { name: 'Value', binding: 'value' }
	  ]
	});
}

 

5. 绑定事件,让图标随数据动态变化

sheet.bind(GcSpread.Sheets.Events.ValueChanged, function (sender, args) {
    if(args.col == 0 || args.col == 1){
    	var activeSheet = spread.getActiveSheet();
    	var datasource = activeSheet.getDataSource();
		  refreshChart(datasource);
    }
});
sheet.bind(GcSpread.Sheets.Events.RangeChanged, function (sender, args) {
			//console.log(args)
    if(args.column == 0 || args.column == 1){
    	var activeSheet = spread.getActiveSheet();
    	var datasource = activeSheet.getDataSource();
		  refreshChart(datasource);
    }
});
function refreshChart(datasource){
	chart.itemsSource = new wijmo.collections.CollectionView(datasource);
	chartTypes.itemsSource = new wijmo.collections.CollectionView(datasource);
}

 

大功告成,去RunJS上看看效果吧 http://runjs.cn/code/vzzf8gls

 

更多资源

SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn

Wijmo官网


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网