Dazdata BI（Redash中文商业版）深度应用技术详解（第二期）

上一期，我们详细介绍了DazdataBI（Redash中文商业版）部件联动、视图深入应用、取数函数使用的三个深入应用的内容，前期回顾链接地址：DazdataBI（Redash中文商业版）深度应用技术详解。

本期，我们将详细讲解，DazdataBI独有的自定义代码功能。

一、自定义代码

DazdataBI创造性提供了自定义代码视图功能，目前包括四类基础引擎（Plotly\ECharts\Three\），采用沙盒模式运行代码，同时把后台数据以内置对象的形式传进沙盒供调用，解决了传统BI产品充分依赖模板没有灵活性的问题。·············如下图所示，在视图类型中选择对应的自定义视图类型即可以自定义代码的方式设计图表。

(1)、内置对象：

1.x对象，此对象是在视图--通用--x轴选项中选择的字段的所有数据组成的数组。

2.ys对象，此对象是在视图--通用--y轴选项中选择的所有字段组成的json对象。例如获取就是字段名为field1的所有数据组成的数组。

3.scheme对象，为样式对象，里面有当前报表的所有样式信息

取当前报表的样式名

取报表背景样式

取部件背景样式

取部件文字颜色

取部件标题栏背景样式

取部件标题栏文字颜色

4.parameter对象，为url参数对象，里面有当前报表所有url参数的信息例如，报表url为;p_id2=2

_id1取url中p_id1的值

_id2取url中p_id3的值

row对象，为Table视图中应用自定义代码视图列类型时，传入的行记录结果对象。默认在编辑态取table表格第0行的数据。

(2)、内置函数：

2、onrefreshdashboardhandler、onrefreshwidgethandler为强制刷新报表或部件数据函数。

3、onexpanddashboardhandler以弹窗方式调用已发布报表函数。

(3)、ECharts视图参考手册

ECharts是纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRer，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

DazdataBI现已全面集成EChart全部图表组件，无需任何配置，自定义视图采用沙盒模式可实现增量渲染技术，配合各种细致的优化，能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互，两组数据之间的差异然后通过合适的动画去表现数据的变化，轻松实现动态数据。线数据，点数据等地理数据的可视化可增加特效，展示更多更强大绚丽的三维可视化，可以轻松的绘制出三维的地球，建筑群，人口分布的柱状图，画面渲染效果更加艺术性！

1.静态数据

//选择自定义视图（ECharts），初始化对象，容器名称为chartDom

varmyChart=(chartDom);

//指定图表的配置项

varoption;

option={

xAxis:{

type:'category',

data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']

},

yAxis:{

type:'value'

},

series:[{

data:[150,230,224,218,135,147,260],

type:'line'

}]

};

(option);

图表展示效果：

2.接口参数数据使用方法

x：为x轴返回值数组。

ys：为y轴返回值数组对象，如下图示例中获取对应y轴返回值数组。

3.取数函数用法

query或querys查询id，数字，属于必填参数。当用querys时会立即加载，适用于非界面显示元素。

colName取数列名，字符串，必填参数。

rowNumber取数行号，可选参数。该参数为数字时：取指定行的值(从0开始)；该参数不存在时：返回指定列全部行值数组

如：data:,表示取查询id为365的表中列名为alexa的数据。保存后效果如下：

更多图例请参考：

(4)、Three动画参考手册

（官网）是基于WebGL的Javascript开源框架，简言之，就是能够实现3D动画效果的JS库。3D动画可视化开发都是需要前端开发基础，目前市场两大和技术应用成熟且广泛。DazdataBI内置引擎，可以方便的已自定义代码方式引入3D功能。

下面以官方示例littletokoya为例，用自定义代码实现3D视图：

loadJS("/static/three/examples/js/controls/",()={

loadJS("/static/three/examples/js/environments/",()={

loadJS("/static/three/examples/js/loaders/",()={

loadJS("/static/three/examples/js/loaders/",()={

init();

});

});

});

});

functioninit(){

letmixer;

constclock=();

constrerer=({antialias:true});

();

(,);

=;

();

constpmremGenerator=(rerer);

constscene=();

=(0xbfe3dd);

=((),0.04).texture;

constcamera=(40,/,1,100);

(5,2,8);

constcontrols=(camera,);

(0,0.5,0);

();

=false;

=true;

constdracoLoader=();

('/static/three/examples/js/libs/draco/gltf/');

constloader=();

(dracoLoader);

('/static/three/',function(gltf){

constmodel=;

(1,1,0);

(0.01,0.01,0.01);

(model);

mixer=(model);

([0]).play();

animate();

},undefined,function(e){

(e);

});

=function(){

=/;

();

(,);

};

functionanimate(){

requestAnimationFrame(animate);

constdelta=();

(delta);

();

(scene,camera);

}

}

functionloadJS(url,callback){

fn=callback||function(){};

if((url)){

fn();

return;

}

varscript=('script');

//='module';

=url;

//IE

if(){

=function(){

if(=='loaded'||=='complete'){

=null;

fn();

}

};

}else{

//其他浏览器

=function(){

fn();

};

}

=url;

('head')[0].appChild(script);

}

若要实现3D标注并连接其它BI报表，需要用到自定义代码内置对象。

functiononMouseClick(e){

=/*2-1;

=-(/*2)+1;

(mouse,camera);

varintersects=(,true);

//选中后进行的操作

for(vari=0;;i++){

//(intersects[i].)

if(intersects[i].==="House_World_ap_0"){

onexpanddashboardhandler(396);

//("thisis1");

break;

}elseif(intersects[i].==="House_2_World_ap_0"){

onexpanddashboardhandler(356,true);

//("thisis2");

break;

}elseif(intersects[i].==="House_3_World_ap_0"){

("thisis3");

break;

}

};

//(intersects)

}

varmouse=();

('click',onMouseClick,false);

7、表格参考手册

JQueryDataTables（官网）深受欢迎且功能强大，通过DazdataBI的沙盒代码模式可以编程开发任意复杂报表。且支持带格式输出成Excel文件。DazdataBI报表开发不再难。

varmyhtml=`

linkhref=""rel="stylesheet"type="text/css"

style

_length{

padding-left:2em;

}

_length,

_filter{

padding-top:0.55em;

}

.test{

width:100%;

height:100%;

overflow:auto;

float:left;

border:none;

}

.test-1::-webkit-scrollbar{/*滚动条整体样式*/

width:10px;/*高宽分别对应横竖滚动条的尺寸*/

height:1px;

}

.test-1::-webkit-scrollbar-thumb{/*滚动条里面小方块*/

border-radius:10px;

-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);

background:EDEDED;

}

._1{

background:transparent;

}

/style

divclass="testtest-1"

tableid="example"class="displaymytable"style="width:99%;background:transparent;"

thead

tr

throwspan="2"Name/th

thcolspan="3"Info/th

thcolspan="2"Count/th

/tr

tr

thPosition/th

thOffice/th

thAge/th

thStartdate/th

thSalary/th

/tr

/thead

tbodystyle="background:transparent;"

tr

tdstyle="background:transparent;"TigerNixon/td

tdSystemArchitect/td

tdEdinburgh/td

td61/td

td2011/04/25/td

td$320,800/td

/tr

trstyle="background:transparent;"

tdGarrettWinters/td

tdAccountant/td

tdTokyo/td

td63/td

td2011/07/25/td

td$170,750/td

/tr

tr

tdAshtonCox/td

tdJuniorTechnicalAuthor/td

tdSanFrancisco/td

td66/td

td2009/01/12/td

td$86,000/td

/tr

tr

tdCedricKelly/td

tdSeniorJavascriptDeveloper/td

tdEdinburgh/td

td22/td

td2012/03/29/td

td$433,060/td

/tr

tr

tdAiriSatou/td

tdAccountant/td

tdTokyo/td

td33/td

td2008/11/28/td

td$162,700/td

/tr

tr

tdBrielleWilliamson/td

tdIntegrationSpecialist/td

tdNewYork/td

td61/td

td2012/12/02/td

td$372,000/td

/tr

tr

tdHerrodChandler/td

tdSalesAssistant/td

tdSanFrancisco/td

td59/td

td2012/08/06/td

td$137,500/td

/tr

tr

tdRhonaDavidson/td

tdIntegrationSpecialist/td

tdTokyo/td

td55/td

td2010/10/14/td

td$327,900/td

/tr

tr

tdColleenHurst/td

tdJavascriptDeveloper/td

tdSanFrancisco/td

td39/td

td2009/09/15/td

td$205,500/td

/tr

tr

tdSonyaFrost/td

tdSoftwareEngineer/td

tdEdinburgh/td

td23/td

td2008/12/13/td

td$103,600/td

/tr

tr

tdJenaGaines/td

tdOfficeManager/td

tdLondon/td

td30/td

td2008/12/19/td

td$90,560/td

/tr

tr

tdQuinnFlynn/td

tdSupportLead/td

tdEdinburgh/td

td22/td

td2013/03/03/td

td$342,000/td

/tr

tr

tdChardeMarshall/td

tdRegionalDirector/td

tdSanFrancisco/td

td36/td

td2008/10/16/td

td$470,600/td

/tr

tr

tdHaleyKennedy/td

tdSeniorMarketingDesigner/td

tdLondon/td

td43/td

td2012/12/18/td

td$313,500/td

/tr

tr

tdTatyanaFitzpatrick/td

tdRegionalDirector/td

tdLondon/td

td19/td

td2010/03/17/td

td$385,750/td

/tr

tr

tdMichaelSilva/td

tdMarketingDesigner/td

tdLondon/td

td66/td

td2012/11/27/td

td$198,500/td

/tr

tr

tdPaulByrd/td

tdChiefFinancialOfficer(CFO)/td

tdNewYork/td

td64/td

td2010/06/09/td

td$725,000/td

/tr

tr

tdGloriaLittle/td

tdSystemsAdministrator/td

tdNewYork/td

td59/td

td2009/04/10/td

td$237,500/td

/tr

tr

tdBradleyGreer/td

tdSoftwareEngineer/td

tdLondon/td

td41/td

td2012/10/13/td

td$132,000/td

/tr

tr

tdDaiRios/td

tdPersonnelLead/td

tdEdinburgh/td

td35/td

td2012/09/26/td

td$217,500/td

/tr

tr

tdJenetteCaldwell/td

tdDevelopmentLead/td

tdNewYork/td

td30/td

td2011/09/03/td

td$345,000/td

/tr

tr

tdYuriBerry/td

tdChiefMarketingOfficer(CMO)/td

tdNewYork/td

td40/td

td2009/06/25/td

td$675,000/td

/tr

tr

tdCaesarVance/td

tdPre-SalesSupport/td

tdNewYork/td

td21/td

td2011/12/12/td

td$106,450/td

/tr

tr

tdDorisWilder/td

tdSalesAssistant/td

tdSydney/td

td23/td

td2010/09/20/td

td$85,600/td

/tr

tr

tdAngelicaRamos/td

tdChiefExecutiveOfficer(CEO)/td

tdLondon/td

td47/td

td2009/10/09/td

td$1,200,000/td

/tr

tr

tdGavinJoyce/td

tdDeveloper/td

tdEdinburgh/td

td42/td

td2010/12/22/td

td$92,575/td

/tr

tr

tdJenniferChang/td

tdRegionalDirector/td

tdSingapore/td

td28/td

td2010/11/14/td

td$357,650/td

/tr

tr

tdBrenWagner/td

tdSoftwareEngineer/td

tdSanFrancisco/td

td28/td

td2011/06/07/td

td$206,850/td

/tr

tr

tdFionaGreen/td

tdChiefOperatingOfficer(COO)/td

tdSanFrancisco/td

td48/td

td2010/03/11/td

td$850,000/td

/tr

tr

tdShouItou/td

tdRegionalMarketing/td

tdTokyo/td

td20/td

td2011/08/14/td

td$163,000/td

/tr

tr

tdMichelleHouse/td

tdIntegrationSpecialist/td

tdSydney/td

td37/td

td2011/06/02/td

td$95,400/td

/tr

tr

tdSukiBurks/td

tdDeveloper/td

tdLondon/td

td53/td

td2009/10/22/td

td$114,500/td

/tr

tr

tdPrescottBartlett/td

tdTechnicalAuthor/td

tdLondon/td

td27/td

td2011/05/07/td

td$145,000/td

/tr

tr

tdGavinCortez/td

tdTeamLeader/td

tdSanFrancisco/td

td22/td

td2008/10/26/td

td$235,500/td

/tr

tr

tdMartenaMccray/td

tdPost-Salessupport/td

tdEdinburgh/td

td46/td

td2011/03/09/td

td$324,050/td

/tr

tr

tdUnityButler/td

tdMarketingDesigner/td

tdSanFrancisco/td

td47/td

td2009/12/09/td

td$85,675/td

/tr

tr

tdHowardHatfield/td

tdOfficeManager/td

tdSanFrancisco/td

td51/td

td2008/12/16/td

td$164,500/td

/tr

tr

tdHopeFuentes/td

tdSecretary/td

tdSanFrancisco/td

td41/td

td2010/02/12/td

td$109,850/td

/tr

tr

tdVivianHarrell/td

tdFinancialController/td

tdSanFrancisco/td

td62/td

td2009/02/14/td

td$452,500/td

/tr

tr

tdTimothyMooney/td

tdOfficeManager/td

tdLondon/td

td37/td

td2008/12/11/td

td$136,200/td

/tr

tr

tdJacksonBradshaw/td

tdDirector/td

tdNewYork/td

td65/td

td2008/09/26/td

td$645,750/td

/tr

tr

tdOliviaLiang/td

tdSupportEngineer/td

tdSingapore/td

td64/td

td2011/02/03/td

td$234,500/td

/tr

tr

tdBrunoNash/td

tdSoftwareEngineer/td

tdLondon/td

td38/td

td2011/05/03/td

td$163,500/td

/tr

tr

tdSakuraYamamoto/td

tdSupportEngineer/td

tdTokyo/td

td37/td

td2009/08/19/td

td$139,575/td

/tr

tr

tdThorWalton/td

tdDeveloper/td

tdNewYork/td

td61/td

td2013/08/11/td

td$98,540/td

/tr

tr

tdFinnCamacho/td

tdSupportEngineer/td

tdSanFrancisco/td

td47/td

td2009/07/07/td

td$87,500/td

/tr

tr

tdSergeBaldwin/td

tdDataCoordinator/td

tdSingapore/td

td64/td

td2012/04/09/td

td$138,575/td

/tr

tr

tdZenaidaFrank/td

tdSoftwareEngineer/td

tdNewYork/td

td63/td

td2010/01/04/td

td$125,250/td

/tr

tr

tdZoritaSerrano/td

tdSoftwareEngineer/td

tdSanFrancisco/td

td56/td

td2012/06/01/td

td$115,000/td

/tr

tr

tdJenniferAcosta/td

tdJuniorJavascriptDeveloper/td

tdEdinburgh/td

td43/td

td2013/02/01/td

td$75,650/td

/tr

tr

tdCaraStevens/td

tdSalesAssistant/td

tdNewYork/td

td46/td

td2011/12/06/td

td$145,600/td

/tr

tr

tdHermioneButler/td

tdRegionalDirector/td

tdLondon/td

td47/td

td2011/03/21/td

td$356,250/td

/tr

tr

tdLaelGreer/td

tdSystemsAdministrator/td

tdLondon/td

td21/td

td2009/02/27/td

td$103,500/td

/tr

tr

tdJonasAlexander/td

tdDeveloper/td

tdSanFrancisco/td

td30/td

td2010/07/14/td

td$86,500/td

/tr

tr

tdShadDecker/td

tdRegionalDirector/td

tdEdinburgh/td

td51/td

td2008/11/13/td

td$183,000/td

/tr

tr

tdMichaelBruce/td

tdJavascriptDeveloper/td

tdSingapore/td

td29/td

td2011/06/27/td

td$183,000/td

/tr

tr

tdDonnaSnider/td

tdCustomerSupport/td

tdNewYork/td

td27/td

td2011/01/25/td

td$112,000/td

/tr

/tbody

tfoot

tr

thName/th

thPosition/th

thOffice/th

thAge/th

thStartdate/th

thSalary/th

/tr

/tfoot

/table

/div`;

='rt"bottom"iflp"clear"';

//:['excel'];

=123;

(options);

=myhtml;

$(document).ready(function(){

$('#example').DataTable(options);

});