免责声明:此范例仅限于个人自定义开发使用,SAP不保证或担保任何功能的实现。SCN中的资料和文档仅以说明性为目的创作的,其内容并不作为某些功能实现的保证或担保。
虽然BI4.2 的Webi里面提供了地图图表的功能,但是由于某些因素,Webi中内置的地图仅仅包含了很少部分的中国省市。但是在BI4.2中可以创建“自定义元素”来添加自定义的图表。这个例子就是基于百度echarts而实现的地图图表。
附件中的示例的js文件实现了自定义元素的Web服务。这个示例是基于下面的资源开发的。
请下载附件后,将附件中的txt文件的后缀名改成js。在这个js文件中包含基于百度echart开发的地图图表,是一个自定义web服务。
在运行这个js实例之前,请先指定web服务监听的端口号。通过修改下面的代码来指定端口号。把port改成你想要的端口号。
// Set the port number
app.listen(port);
按照下面的步骤通过pm2启动js实例。
如果启动成功,你将会看到下面这样的结果。
开发NodeJS程序可以使用nodeclipse开发框架。Nodeclipse提供了基于Eclipse的开发IDE(Enide)。关于如何配置Nodeclipse开发环境可以参考网络上的一些资料,也可以参考Nodeclipse的官方文档。
接下来我简单说一下代码扩展方法。
对于echart来说,所有chart的生成都是把chart的属性变量 “option”传给一个echart API生成的chart的实例。这样对于我们扩展其他图表类型就提供了很大的方便。我们只需要在代码中生成对应图表的option,就可以得到想要的图表。
按照上面的思路,我们需要做下面的工作来实现扩展。
这样我们就实现了其他echart的集成。后续code大致如下面的样子。
//New Chart
// Initialize viz<ID> object
var viz<ID> = new Visualization(params)
factory.visualizations.push(viz<ID>);
// HTML generate function
viz<ID>.generate =function(req){
//initialize option structure for echart
var option = {<...>}
var w = req.body.width ? req.body.width : 1100;
var h = req.body.height ? req.body.height : 900;
//start to generate option.
//end to genertate option
var html='<!DOCTYPE html>'+
'<html>'+
'<head>'+
' <meta charset="utf-8">'+
' <title>ECharts</title>'+
' <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>'+
' <script src="http://echarts.baidu.com/asset/map/js/china.js"></script>'+
'</head>'+
'<body>'+
' <div id="main" style="width: '+w+'px;'+
'height:'+h+'px;'+
'"></div>'+
' <script type="text/javascript">'+
' var myChart = echarts.init(document.getElementById(\'main\'));'+
'option='+JSON.stringify(option)+';'+
' myChart.setOption(option);'+
' </script>'+
'</body>'+
'</html>';
return html;
};
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
29 | |
21 | |
10 | |
7 | |
7 | |
6 | |
6 | |
5 | |
5 | |
5 |