DataV为购买了尊享版的用户提供的二次开发功能。使用尊享版DataV,您可通过编写JavaScript代码(hook脚本)的方式进行可视化页面的开发,使用该功能配置可视化应用内各种复杂交互效果的实现,它拥有比蓝图编辑器更高的自由度和灵活度,方便开发人员自己随意定制心仪的可视化应用。

前提条件

您已购买DataV尊享版产品。

hook脚本开发使用方法

  1. 登录DataV控制台
  2. 我的可视化页面,单击您创建的可视化应用项目。
    如果页面中没有可视化应用项目,需要首先创建可视化应用项目,详情请参见使用模板创建PC端可视化应用
  3. 进入可视化应用画布中,添加所需要的组件。

    本文中以添加一个常规组件和地图组件,并在地图组件内添加一个地图子组件为例。

  4. 单击选中画布中的常规组件(如下图的基本水位图)。
  5. 在浏览器中打开开发者工具。

    在Windows电脑上使用快捷键F12或者在Mac电脑上使用组合键command+option+i进入调试控制界面。

  6. 在调试控制界面的Console页签查看各组件的Key值。
    1. 鼠标选中常规组件,即可在控制台查看并获取对应的Key值。
      查看并选中常规组件key
    2. 再次选中画布中的地图组件(如下图中的基础平面地图组件),和上述常规组件获取Key值的方式一样,在Console页签里查看并获取当前地图父容器的Key值。
      地图父容器key
    3. 以在基础平面地图添加了区域热力层子组件为例。在地图组件配置面板中单击区域热力层子组件,和上述地图父容器获取Key的方式一样,在Console页签里查看并获取区域热力层子组件的Key值。
      图 1. 选中区域热力层子组件
      选中区域热力层子组件
      图 2. 查看并获取区域热力层的Key
      查看并获取区域热力层的key
  7. 在DataV的画布编辑页面,将页面URL中的screen替换成hook,打开替换后的URL链接即可进入当前可视化应用的hook编辑器界面。进入hook编辑器页面
  8. 在hook脚本编辑器界面内获取组件对象。hook脚本获取组件对象
    示例代码如下所示。
    module.exports = (stage) => {
      //获取组件
      const changgui =
    stage.get("@datav_shukongkeji_shuiweitu_ARVrX");
    
      const map2d =
    stage.get("datavmap-2d_CpH7b");
    
      const map2d_areaLayer =
    stage.get("datavmap-2d-layer-area_je9EA");
    
      const datavGL =
    stage.get("@datav_gl_datavmap-3d_r3LLY");
    
      const datavGL_areaLayer =
    stage.get("datavmap-3d-layer-mapbox-area_fW4Nl");
    
    }

DataV可视化应用页面使用DOM基础操作

在DataV可视化应用页面中使用DOM的基础操作包括以下两种:
  • 查看DataV可视化应用在预览页面时的DOM整体布局。
    查看DOM布局步骤如下:
    1. 单击可视化应用的预览,打开可视化应用预览页面。
    2. 在预览界面内,在Windows电脑上使用快捷键F12或者在Mac电脑上使用组合键command+option+i进入调试控制界面。
    3. 在调试控制界面的Elements页签,查看可视化应用容器div以及应用内所有添加的组件。查看DOM布局内容
      • 可视化应用的容器div(图示中①)。
      • 可视化应用所有添加的组件(图示中②)。
    4. 进入hook编辑器界面,在hook脚本编辑器界面内查看页面的DOM布局。
      示例代码如下所示。
      module.exports = function (stage) {
          //hook编辑页默认支持Jquery,可以通过$(".layer") 获取到大屏容器div节点。
          let datavLayout = $(".layer");
      }
  • 修改DataV组件的DOM节点样式。
    在hook脚本编辑器界面,修改节点样式示例代码如下所示。
    module.exports = function (stage) {
        const com = stage.get("组件Key");//获取组件
        //修改组件位置
      $(com.container).parent().css({
            "left": 0,
            "top": 100
        });
        //修改组件透明度
        $(com.container).parent().css("opacity",
    0.6);
    
       $(com.container).parent().fadeIn();
    
        $(com.container).parent().fadeOut();
    
        //其他Jquery动画,等等
    }

DataV可视化应用页面中使用SVG

在DataV可视化应用页面中使用SVG,示例操作代码如下。
module.exports = function (stage) {
    let datavLayout = $(".layer");

    const mySvg = '<svg
width="1920" height="1080"
xmlns="http://www.w3.org/2000/svg">'
        + '<path d="M50,100 q300,200
420,300 q700,200 1000,0" stroke="#cd0000"
stroke-width="10" fill="none" />'
        + '<text font-family="microsoft
yahei" x="0" y="0" fill="white"
style="font-size:100">DataV'
            + '<animateMotion
path="M50,100 q300,200 420,300 q700,200 1000,0" begin="0s"
dur="3s" rotate="auto"
repeatCount="indefinite"/>'
        + '</text>'
    + '</svg>';

    datavLayout.append(mySvg);
}

DataV可视化应用页面中使用Canvas

在DataV可视化应用页面中使用Canvas,示例操作代码如下。
module.exports = function (stage,
groupnoneed, done) {
    let datavLayout = $(".layer");

    const myCanvas = '<canvas
id="myCanvas" width="1920" height="1080"/>';
    datavLayout.append(myCanvas);

    //获取Canvas对象(画布)   
    var canvas =
document.getElementById("myCanvas");  

    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误。  

    if(canvas.getContext){     
        //获取对应的CanvasRenderingContext2D对象(画笔)   
        var ctx =
canvas.getContext("2d");     
        
        //开始一个新的绘制路径  

        ctx.beginPath();   
        //设置弧线的颜色为蓝色  

        ctx.strokeStyle = "white";   
        var circle = {   
            x : 400,    //圆心的x轴坐标值   
            y : 300,    //圆心的y轴坐标值   
            r : 100      //圆的半径   
        };  

        //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线  

        ctx.arc(circle.x, circle.y, circle.r,
0, Math.PI / 2, false);       
        //按照指定的路径绘制弧线
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#e3f';
        ctx.stroke();   
    }
}

DataV可视化应用页面中使用CSS

在DataV可视化应用页面中使用CSS,示例操作代码如下。
module.exports = function (stage,
groupnoneed, done) {
    const css = '<style>'
        + '.anim-opacity2{'
            + 'animation:5s opacity2 0s
infinite;'
            + '-webkit-animation:5s opacity2 0s
infinite;'
            + '-moz-animation:5s opacity2 0s
infinite}'
            + '@Keyframes
opacity2{0%{opacity:0}50%{opacity:1}100%{opacity:0}}'
            + '@-webkit-Keyframes
opacity2{0%{opacity:0}50%{opacity:1}100%{opacity:0}}'
            + '@-moz-Keyframes
opacity2{0%{opacity:0}50%{opacity:1}100%{opacity:0}}'
    + '</style>';
    $("head").append(css);

    $(stage.get("单张图片_NCK7b").container).addClass("anim-opacity2");//单张图片_NCK7b可替换成可视化应用中任意组件Key

    const httpPre =
'http://g.alicdn.com/alilog';
    const script = '<script
type="text/javascript" async="" src="'+ httpPre
+'/oneplus/entry.js?t=212092"></script>';
    $("head").append(script);

    const css2 = '<link
href="//cdn-service.datav.aliyun.com/datav-static/1.6.24_1/css/error-cover.css"
rel="stylesheet">'
    $("head").append(css2);//将样式标签加入到HTML中的head标签里
}

通过hook脚本方式进行回调ID操作

通过hook脚本的方式进行回调ID注册与监听,示例操作代码如下。
module.exports = function (stage) {
    const lunboCom = stage.get("轮播列表柱状图_H56r8");
    const flylineCom =
stage.get("map3d-earth-flyingline_bPFjS");//飞线

    setTimeout(function(){
        for (let i=0; i<3; i++) {
            const index = i;
            setTimeout(function(){
               const adcode =
lunboCom._data[index].adcode;
               //注册回调id事件
               lunboCom.emit('global_var',
'adcode', adcode);
            }, index * 5000);
        }
    },3000);

    //方式1:监听回调id事件
    flylineCom.addListener('global_var',
function(arg1, arg2) {
        console.log('global_var', "方式1: " + arg1, arg2); //arg1 = 'adcode'; arg2 =
'330000';
    });

    //方式2:监听回调id事件
    flylineCom.on('global_var', function(arg1,
arg2) {
        console.log('global_var', "方式2: " + arg1, arg2); //arg1 = 'adcode'; arg2 =
'330000';

    });
}