UDN-企业互联网技术人气社区

板块导航

浏览  : 1480
回复  : 3

[原生js] qlikview 扩展插件制作教程-EchartsGeoMap

[复制链接]
独领风骚的头像 楼主
发表于 2017-2-4 10:27:09 | 显示全部楼层 |阅读模式
  效果图
1.png

  显示效果和echarts官方demo一样,运行速度尚可。

  第一次写博客,排版很渣以后慢慢改进。

  基础知识

  以EchartsGeoMap为例,讲一下怎么制作一个基础的QlikView Extensions。

  1.前置技能: 基础dom知识, 基础js知识。能做官方下载的demo到能够在本地运行。能看懂并理解下面的代码就可以了。
  1. <html>
  2. <head>
  3.     <script src="./lib/js/jquery.min.js"></script>
  4.     <script src="./lib/js/echarts.js"></script>
  5.     <script type="text/JavaScript">
  6.         $(function () {
  7.             var myChart = echarts.init(document.getElementById('container'));
  8.             myChart.showLoading();
  9.             $.get('./lib/maps/HK_geo.json', function (geoJson) {
  10.                 myChart.hideLoading();
  11.                 echarts.registerMap('HK', geoJson);
  12.                 myChart.setOption(option = {
  13.                     tooltip: {
  14.                         trigger: 'item',
  15.                         formatter: '{b}<br/>{c} (p / km2)'
  16.                     },
  17.                     toolbox: {
  18.                         show: true,
  19.                         left: 'left',
  20.                         top: 'top',
  21.                         feature: {
  22.                             dataView: { readOnly: false },
  23.                             restore: {},
  24.                             saveAsImage: {}
  25.                         }
  26.                     },
  27.                     visualMap: {
  28.                         min: 800,
  29.                         max: 50000,
  30.                         text: ['High', 'Low'],
  31.                         realtime: false,
  32.                         calculable: true,
  33.                         inRange: {
  34.                             color: ['lightskyblue', 'yellow', 'orangered']
  35.                         }
  36.                     },
  37.                     series: [
  38.                         {
  39.                             name: '香港18区人口密度',
  40.                             type: 'map',
  41.                             mapType: 'HK', // 自定义扩展图表类型
  42.                             selectedMode: 'multiple',
  43.                             itemStyle: {
  44.                                 normal: { label: { show: true } },
  45.                                 emphasis: { label: { show: true } }
  46.                             },
  47.                             data: [
  48.                                 { name: '中西区', value: 20057.34 },
  49.                                 { name: '湾仔', value: 15477.48 },
  50.                                 { name: '东区', value: 31686.1 },
  51.                                 { name: '南区', value: 6992.6 },
  52.                                 { name: '油尖旺', value: 44045.49 },
  53.                                 { name: '深水埗', value: 40689.64 },
  54.                                 { name: '九龙城', value: 37659.78 },
  55.                                 { name: '黄大仙', value: 45180.97 },
  56.                                 { name: '观塘', value: 55204.26 },
  57.                                 { name: '葵青', value: 21900.9 },
  58.                                 { name: '荃湾', value: 4918.26 },
  59.                                 { name: '屯门', value: 5881.84 },
  60.                                 { name: '元朗', value: 4178.01 },
  61.                                 { name: '北区', value: 2227.92 },
  62.                                 { name: '大埔', value: 2180.98 },
  63.                                 { name: '沙田', value: 9172.94 },
  64.                                 { name: '西贡', value: 3368 },
  65.                                 { name: '离岛', value: 806.98 }
  66.                             ],
  67.                             // 自定义名称映射 date→nameMap→geoJson
  68.                             nameMap: {
  69.                                 'Central and Western': '中西区',
  70.                                 'Eastern': '东区',
  71.                                 'Islands': '离岛',
  72.                                 'Kowloon City': '九龙城',
  73.                                 'Kwai Tsing': '葵青',
  74.                                 'Kwun Tong': '观塘',
  75.                                 'North': '北区',
  76.                                 'Sai Kung': '西贡',
  77.                                 'Sha Tin': '沙田',
  78.                                 'Sham Shui Po': '深水埗',
  79.                                 'Southern': '南区',
  80.                                 'Tai Po': '大埔',
  81.                                 'Tsuen Wan': '荃湾',
  82.                                 'Tuen Mun': '屯门',
  83.                                 'Wan Chai': '湾仔',
  84.                                 'Wong Tai Sin': '黄大仙',
  85.                                 'Yau Tsim Mong': '油尖旺',
  86.                                 'Yuen Long': '元朗'
  87.                             }
  88.                         }
  89.                     ]
  90.                 });
  91.             });
  92.             myChart.on('click', function (params) {
  93.                 alert(params.seriesName);
  94.                 alert(params.name);
  95.                 alert(params.value);
  96.             });
  97.         })
  98.     </script>
  99. </head>

  100. <body>
  101.     <div id="container" style="width: 600px; height: 600px; margin: 0 auto"></div>
  102. </body>

  103. </html>
复制代码

  2.QlikView Extensions基础知识

  目录结构
  1. lib/js                  //引用的js文件 ( jquery3,echarts3 )

  2. lib/maps                  //地图数据 ( 省份地图数据来自dataV.js项目 )

  3. Definition.xml          //qv中右键配置; 文件名不能改

  4. Icon.png                 //插件图标; 文件名不能改

  5. Script.js                 //自定义脚本;
复制代码

  文件名不能改

  1.以上文件最后要打包在qar中,以后在用户机器上安装。目前还没找到官方的方法,我是用winrar打开官方的qar包,把文件替换掉。

  2.webview模式会使用ie浏览器内核。

  开始

  1.Definition.xml
  1. <?xml version="1.0" encoding="gb2312"?>
  2. <ExtensionObject Path="EChartsGeoMap"     //插件路径
  3.                  Label="EChartsGeoMap"     //插件名称
  4.                  Description="EChartsGeoMap"  //插件描述
  5.                  Type="object">
  6.     <Dimension Label="Dimension" Initial=""/>     //维度
  7.     <Measurement Label="Expression" Initial="" />  //表达式
  8.   <!--设置参数;Expression="" 设置默认值-->
  9.     <Text Label="MapFile" Type="text" Initial="" Expression="china"/>    
  10.     <Text Label="Color(L;N;U)" Type="text" Initial="" Expression="lightskyblue;yellow;orangered"/>
  11.     <Text Label="Color Piecewise" Type="text" Expression="0"/>
  12.     <Text Label="Color Piecewise(L;U)" Type="text" Initial="" Expression="80;100"/>
  13. </ExtensionObject>
复制代码

  DynProperties.qvpp会在启动qv时根据以上xml自动生成。

  2.Script.js
  1. /*! echartsGeoMap v1.0 | MyronJi |  */
  2. function EChartsGeoMap_Init() {
  3.     if (document.charset) {
  4.         document.charset = 'utf-8';     //更改页面编码
  5.     }
  6.     Qva.AddExtension("EChartsGeoMap", function () {     //注册插件,这里的名字要和xml中的name相同
  7.         var _this = this;

  8.         _this.ExtSettings = {};
  9.         _this.ExtSettings.ExtensionName = 'EChartsGeoMap';
  10.         _this.ExtSettings.LoadUrl = Qva.Remote + (Qva.Remote.indexOf('?') >= 0 ? '&' : '?') + 'public=only' + '&name=';     //获取插件目录路径

  11.         var mapPath = 'Extensions/' + _this.ExtSettings.ExtensionName + '/lib/maps';
  12.         var imagePath = 'Extensions/' + _this.ExtSettings.ExtensionName + '/lib/images';

  13.         //Array to hold the js libraries to load up.
  14.         var jsFiles = [];

  15.         //pushing the js files to the jsFiles array
  16.         jsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/jquery.min.js');
  17.         jsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/echarts.min.js');

  18.         //get qv value
  19.         var mapData = [];
  20.         var maxValue = 0;
  21.         var minValue = 50;
  22.         var colorParameter = [];

  23.         try {
  24.             d = _this.Data      //_this.Data.Rows[i][j].text,这是获取xml中维度和表达式的方法。
  25.             for (var i = 0; i < d.Rows.length; i++) {
  26.                 var r = d.Rows[i];
  27.                
  28.                 obj = {
  29.                     name: r[0].text,
  30.                     value: parseFloat(r[1].text)
  31.                 };
  32.                 if (maxValue < obj.value) { maxValue = obj.value };
  33.                 if (minValue > obj.value) { minValue = obj.value };
  34.                 mapData.push(obj);
  35.             }

  36.             var mapFile = _this.Layout.Text0.text.toString();       //这是获取xml中设置参数的方法。
  37.             var colors = _this.Layout.Text1.text.split(';');
  38.             var colorType = _this.Layout.Text2.text.toString();
  39.             var Piecewise_Lower = parseFloat(_this.Layout.Text3.text.split(';')[0]);
  40.             var Piecewise_Upper = parseFloat(_this.Layout.Text3.text.split(';')[1]);


  41.             //set default value
  42.             if ('' == maxValue) maxValue = 100;
  43.             if ('' == minValue) minValue = 0;
  44.             if ('' == colors) colors = ['lightskyblue', 'yellow', 'orangered'];
  45.             if ('' == colorType) colorType = 0;

  46.             //set colorParameter
  47.             if (colorType == 0) {
  48.                 colorParameter = {
  49.                     type: 'continuous',
  50.                     min: minValue,
  51.                     max: maxValue,
  52.                     text: ['High', 'Low'],
  53.                     realtime: false,
  54.                     calculable: true,
  55.                     inRange: {
  56.                         color: colors,//['lightskyblue','yellow', 'orangered'],
  57.                         symbolSize: [30, 100]
  58.                     }
  59.                 }
  60.             }
  61.             else {
  62.                 colorParameter = {
  63.                     type: 'piecewise',
  64.                     pieces: [
  65.                         { min: Piecewise_Upper, color: colors[2] },
  66.                         { min: Piecewise_Lower, max: Piecewise_Upper, color: colors[1] },
  67.                         { max: Piecewise_Lower, color: colors[0] }
  68.                     ],
  69.                     left: 'left',
  70.                     top: 'bottom'
  71.                 }
  72.             }
  73.             //Loading up the js files via the QlikView API that allows an array to be passed.   
  74.             //After we load them up successfully, initialize the chart settings and append the chart
  75.             Qv.LoadExtensionScripts(jsFiles, function () {      //载入jsFiles array中的文件
  76.                 InitSettings();
  77.                 Init();
  78.                 if ('' != mapFile) {        //空值判断,以免报错

  79.                     InitChart(mapFile, mapData, maxValue, minValue);
  80.                 } else {
  81.                     $(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the MapFile?</div> ');
  82.                 }

  83.             });
  84.         }
  85.         catch (err) {
  86.             $(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the Extensions?</div> ');
  87.         }

  88.         function InitSettings() {

  89.             _this.ExtSettings.UniqueId = _this.Layout.ObjectId.replace('\\', '_');      //获取qv对象id

  90.         }

  91.         function Init() {

  92.             $(_this.Element).empty();

  93.             mapchart = document.createElement("div");       //创建地图容器
  94.             $(mapchart).attr('id', 'Chart_' + _this.ExtSettings.UniqueId);
  95.             $(mapchart).height('100%');
  96.             $(mapchart).width('100%');
  97.             $(_this.Element).append(mapchart);
  98.         }

  99.         function InitChart(mapFile, mapData, maxValue, minValue) {
  100.             try {
  101.                 var myChart = echarts.init(document.getElementById('Chart_' + _this.ExtSettings.UniqueId));

  102.                 myChart.showLoading();
  103.                 $.ajaxSetup({
  104.                     async: false
  105.                 });
  106.                 $.get(_this.ExtSettings.LoadUrl + 'Extensions/EChartsGeoMap/lib/maps/' + mapFile + '.json').done(function (geoJson) {
  107.                     myChart.hideLoading();
  108.                     echarts.registerMap(mapFile, geoJson);
  109.                     option = {
  110.                         tooltip: {
  111.                             trigger: 'item'
  112.                         },
  113.                         toolbox: {
  114.                             show: true,
  115.                             left: 'left',
  116.                             top: 'top',
  117.                             feature: {
  118.                                 dataView: { readOnly: false }
  119.                             }
  120.                         },
  121.                         visualMap: colorParameter,
  122.                         series: [
  123.                             {
  124.                                 name: 'data',
  125.                                 type: 'map',
  126.                                 mapType: mapFile,
  127.                                 selectedMode: 'multiple',
  128.                                 itemStyle: {
  129.                                     normal: { label: { show: true } },
  130.                                     emphasis: { label: { show: true } }
  131.                                 },
  132.                                 data: mapData
  133.                             }
  134.                         ]
  135.                     };

  136.                     myChart.setOption(option);
  137.                 });
  138.                 //ckick
  139.                 myChart.on('click', function (params) {
  140.                     _this.Data.SelectRow(params.dataIndex);     //单击地图会选中当前维度中值。
  141.                 });
  142.             }
  143.             catch (err) {
  144.                 if (typeof map != 'undefined') {
  145.                     map.remove();
  146.                 }
  147.                 $(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the Expressions?<br/><br/><b>Error Message:</b><br />' + err.message + '</div> ');

  148.             }
  149.         }
  150.     });
  151. };


  152. EChartsGeoMap_Init();
复制代码

  qv向插件传值的时候会把维度和表达式的值组合成一个数组传到js中。

  this.Data.Rows对应xml中的维度和表达式。[j].text,i代表行号,j 代表列号。

  设置值会打包成另一个数组传进来。
  1. _this.Layout.Text0.text.toString()中的Text0对应xml中的 <Text Label="MapFile" Type="text" Initial="" Expression="china"/>
复制代码

  源代码

  最后附上github地址:

  Qlikview-Extension-ECharts-Map

相关帖子

发表于 2017-2-4 10:27:40 来自手机 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

发表于 2017-2-4 10:27:40 | 显示全部楼层
感觉JavaScript很有前途
使用道具 举报

回复

发表于 2017-2-4 10:27:41 来自手机 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部