在MSTR中使用ECharts作为VI模板(1)-- 创建第一个ECharts的VI模板
来源:互联网 发布:c语言 p 编辑:程序博客网 时间:2024/05/17 03:55
一不小心竟然把自己写的文章给改了,我晕啊。只能重写。。。。
MSTR(MicroStrategy)是一个BI的工具,其默认的VI(视觉效果模板)很有限。官方推荐使用D3.js虽然强大,可实在很复杂,对于JS苦手的我确实很难弄。好在ECharts可以集成其中,要知道ECharts的便捷性对于D3.js来说不是一个数量级的。
本篇从一个简单的示例入手,演示如何在MSTR中使用ECharts。
本篇内容包括:
- 创建VI并引入ECharts
- 创建ECharts图表
- 数据绑定
- 代码整理与优化
- 最终效果
1. 获取筛选后的数据
1.1 准备工作
正式开始前,我们需要准备几样东西:
- D3.js
这个是D3.js的标准库,我们其实用它来建一个Div作为ECharts的容器,地址为https://d3js.org/d3.v4.min.js这个是V4版本的,不过我习惯使用V3版本的,略微有一些不同,地址为https://d3js.org/d3.v4.min.js - ECharts.js
这个不用说了,百度ECharts的库,地址为http://echarts.baidu.com/dist/echarts.min.js
当然还可以有其他的库,比如Jquery等等。可以都下载下来。然后放在MSTR目录下的Tomcat中MicroStrategy的Plugins目录下。我就直接丢在这个根目录了。
1.2 创建VI
我是在Web版,利用Visualization Builder来创建的。也可以参照文档,使用它规定的格式直接创建那些Js,XML文件。当然VI Builder要省力很多。
1.3 引用库
在VI Builder中选择Configuration标签,然后在下方输入库的地址,点击“Add Library”按钮即可。
然后取一个名字,这个名字将用在Dashboard中作为识别用。
最后先保存一下,保存的时候系统会提示保存在哪个文件夹,取一个文件夹名称吧。因为VI是一个按照指定方式存储的文件夹和文件组成的,所以需要给一个文件夹的名称。在以后有空的时候再来讲这个文件夹的构成。
由于我把几个库直接放在了Plugins更目录下,所以引用的代码为:
../plugins/d3.v3.min.js../plugins/echarts.min.js
至于这个Plugins,是在MSTR下自带的Tomcat目录下的webapp下的MicroStrategy下的Plugins。很复杂,试着找找。
2. 创建ECharts图表
2.1 创建第一个ECharts图表
作为测试,我用了ECharts给的最简单的柱形图的示例。代码来自于这里。我们稍微做一下改动,作为ECharts容器的Div我们使用D3.js来创建。代码直接写在Plot Code里面即可。
代码如下:
//Div名称和高宽配置var divName="main" + parseInt(Math.random()*100000000);// 指定图表的配置项和数据var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
2.2 效果演示
正常情况下(至少是按照官方说明的情况下),当代码写好,直接点击Apply按钮或者保存一下,就可以直接看到效果。但是我这里怎么都不行,D3.js代码倒是可以,ECharts总是提示找不到对象。
无奈只能创建一个Dashboard看效果,这里倒是显示正常。顺便说一下,我这个MSTR的版本是10.0.6。还有个问题就是每次VI代码更新,需要清空浏览器缓存才能看到最新版。查看了VI的JS源代码,它默认是去读缓存的,但是改了之后没啥效果,如果有解决的朋友也跟我说一下。
题外话说多了,正常情况下,你可以看见这样一张图。
3 数据绑定
3.1 数据绑定接口
刚才做好的图表是死的,和数据一点关系没有,因而需要绑定一个数据接口。获取数据的接口代码如下,共有两种形式,树形结构和表结构,返回的都是Json数据。
//获取树形结构var rawData = this.dataInterface.getRawData( mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.TREE);//获取表结构var rawData = this.dataInterface.getRawData( mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV);
我这里使用了第二种表结构做示例,两者略有不同
3.2 绑定数据
接下去的代码很简单了,数据给了rawData变量,只要按照ECharts所需要的数据要求整理一下即可。获取数据及图表设置代码如下:
//获取数据var rawData = this.dataInterface.getRawData( mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV);var xTitle=[];var xValue=[];for(i=0;i < rawData.length;i++){ xTitle[i]=rawData[i].headers[0]["name"]; xValue[i]=rawData[i].values[0]["rv"];}// 指定图表的配置项和数据var option = { title: { text: 'ECharts示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: xTitle }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: xValue }]};
这时候可以尝试再到Dashboard里面去添加一个数据集看看效果,正常情况下是可行的。
4 代码整理与优化
最后我们将代码整理并优化一下,使图表自适应。最终代码如下:
//Div名称和高宽配置var divName="main" + parseInt(Math.random()*100000000);var margin = { top : 10, right : 10, bottom : 30, left : 30 }, width = parseInt(this.width, 10) - margin.left- margin.right, height = parseInt(this.height, 10) - margin.top - margin.bottom;//删除已有的图形if(this.domNode.childNodes.length>=1){ for(i=0;i< this.domNode.childNodes.length;i++){ this.domNode.removeChild(this.domNode.childNodes[i]);}}//使用D3创建一段Divd3.select(this.domNode).append("div") .attr("ID",divName) .style("height",height + "px") .style("width",width + "px");//初始化Echarts对象var myChart = echarts.init(document.getElementById(divName));//获取数据var rawData = this.dataInterface.getRawData( mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV);var xTitle=[];var xValue=[];for(i=0;i < rawData.length;i++){ xTitle[i]=rawData[i].headers[0]["name"]; xValue[i]=rawData[i].values[0]["rv"];}// 指定图表的配置项和数据var option = { title: { text: 'ECharts示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: xTitle }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: xValue }]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
5 最终效果
参考
MSTR官方文档 最近这个文档经常更新,我写这篇文章的时候,文档已经和我之前看到的不一样了,越来越完善了,但是地址也可能会变。
- 在MSTR中使用ECharts作为VI模板(1)-- 创建第一个ECharts的VI模板
- 在MSTR中使用ECharts作为VI模板(2)-- 数据筛选器
- ECharts制作报表模板
- Echarts折线图模板
- Echarts柱状图模板
- 在 webpack 中使用 ECharts
- 在Vue项目中使用Echarts(五): Echarts绘制地图
- ECharts官方教程(三)【在webpack中使用 ECharts】
- ECharts制作报表模板--.NET
- 记录在使用react-native-echarts中遇到的问题
- 一些简单配置模板方便使用echarts 3.2.0
- 在Vue-cli项目中使用echarts
- echarts饼状图的创建
- 在安卓中使用echarts
- react中使用echarts
- vuejs中使用echarts
- React中使用ECharts
- angular中使用ECharts
- JavaScript的两种数组遍历
- protoc
- HDU-2128 Tempter of the Bone II 迭代加深搜索
- 在手机端输入PC站的网址,自动跳掉移动端的网址写法:
- 创建博客应用
- 在MSTR中使用ECharts作为VI模板(1)-- 创建第一个ECharts的VI模板
- 插入排序
- Struts2官方教程:表单标签 Form Tags
- 第一个csdn博客-图片三级缓存
- APUE之线程属性
- 异或实现变量交换
- Redis中Sort Set如何使用?
- Unity+Behavior Tree行为树 Behavior Designer TaskList介绍三
- Java的基本配置