當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

qlikview 地图插件制作教程

發布時間：2023/12/31 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 qlikview 地图插件制作教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果圖

顯示效果和echarts官方demo一樣，運行速度尚可。

第一次寫博客，排版很渣以后慢慢改進。

基礎知識

以EchartsGeoMap為例，講一下怎么制作一個基礎的QlikView Extensions。

1.前置技能：　基礎dom知識，基礎js知識。能做官方下載的demo到能夠在本地運行。能看懂并理解下面的代碼就可以了。

<html> <head><script src="./lib/js/jquery.min.js"></script><script src="./lib/js/echarts.js"></script><script type="text/javascript">$(function () {var myChart = echarts.init(document.getElementById('container'));myChart.showLoading();$.get('./lib/maps/HK_geo.json', function (geoJson) {myChart.hideLoading();echarts.registerMap('HK', geoJson);myChart.setOption(option = {tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},toolbox: {show: true,left: 'left',top: 'top',feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},visualMap: {min: 800,max: 50000,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '香港18區人口密度',type: 'map',mapType: 'HK', // 自定義擴展圖表類型 selectedMode: 'multiple',itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: [{ name: '中西區', value: 20057.34 },{ name: '灣仔', value: 15477.48 },{ name: '東區', value: 31686.1 },{ name: '南區', value: 6992.6 },{ name: '油尖旺', value: 44045.49 },{ name: '深水埗', value: 40689.64 },{ name: '九龍城', value: 37659.78 },{ name: '黃大仙', value: 45180.97 },{ name: '觀塘', value: 55204.26 },{ name: '葵青', value: 21900.9 },{ name: '荃灣', value: 4918.26 },{ name: '屯門', value: 5881.84 },{ name: '元朗', value: 4178.01 },{ name: '北區', value: 2227.92 },{ name: '大埔', value: 2180.98 },{ name: '沙田', value: 9172.94 },{ name: '西貢', value: 3368 },{ name: '離島', value: 806.98 }],// 自定義名稱映射 date→nameMap→geoJson nameMap: {'Central and Western': '中西區','Eastern': '東區','Islands': '離島','Kowloon City': '九龍城','Kwai Tsing': '葵青','Kwun Tong': '觀塘','North': '北區','Sai Kung': '西貢','Sha Tin': '沙田','Sham Shui Po': '深水埗','Southern': '南區','Tai Po': '大埔','Tsuen Wan': '荃灣','Tuen Mun': '屯門','Wan Chai': '灣仔','Wong Tai Sin': '黃大仙','Yau Tsim Mong': '油尖旺','Yuen Long': '元朗'}}]});});myChart.on('click', function (params) {alert(params.seriesName);alert(params.name);alert(params.value);});})</script> </head><body><div id="container" style="width: 600px; height: 600px; margin: 0 auto"></div> </body></html>

2.QlikView Extensions基礎知識

　　目錄結構
　　lib/js????????????????? 　　//引用的js文件 ( jquery3，echarts3 )
　　lib/maps????????????????? //地圖數據 ( 省份地圖數據來自dataV.js項目 )
　　Definition.xml????????? //qv中右鍵配置；文件名不能改
　　Icon.png?????????????????//插件圖標；文件名不能改
　　Script.js?????????????????//自定義腳本；文件名不能改

　　1.以上文件最后要打包在qar中，以后在用戶機器上安裝。目前還沒找到官方的方法，我是用winrar打開官方的qar包，把文件替換掉。

　　2.webview模式會使用ie瀏覽器內核。

開始　　

1.Definition.xml

<?xml version="1.0" encoding="gb2312"?> <ExtensionObject Path="EChartsGeoMap" 　　　　//插件路徑 Label="EChartsGeoMap" 　　　　//插件名稱 Description="EChartsGeoMap" //插件描述 Type="object"><Dimension Label="Dimension" Initial=""/> 　　　　//維度<Measurement Label="Expression" Initial="" />　　//表達式
　　<Text Label="MapFile" Type="text" Initial="" Expression="china"/>　　　　<Text Label="Color(L;N;U)" Type="text" Initial="" Expression="lightskyblue;yellow;orangered"/><Text Label="Color Piecewise" Type="text" Expression="0"/> <Text Label="Color Piecewise(L;U)" Type="text" Initial="" Expression="80;100"/> </ExtensionObject>

DynProperties.qvpp會在啟動qv時根據以上xml自動生成。

2.Script.js

/*! echartsGeoMap v1.0 | MyronJi | */ function EChartsGeoMap_Init() {if (document.charset) {document.charset = 'utf-8'; //更改頁面編碼 }Qva.AddExtension("EChartsGeoMap", function () { //注冊插件，這里的名字要和xml中的name相同var _this = this;_this.ExtSettings = {};_this.ExtSettings.ExtensionName = 'EChartsGeoMap';_this.ExtSettings.LoadUrl = Qva.Remote + (Qva.Remote.indexOf('?') >= 0 ? '&' : '?') + 'public=only' + '&name='; //獲取插件目錄路徑var mapPath = 'Extensions/' + _this.ExtSettings.ExtensionName + '/lib/maps';var imagePath = 'Extensions/' + _this.ExtSettings.ExtensionName + '/lib/images';//Array to hold the js libraries to load up.var jsFiles = [];//pushing the js files to the jsFiles arrayjsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/jquery.min.js');jsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/echarts.min.js');//get qv valuevar mapData = [];var maxValue = 0;var minValue = 50;var colorParameter = [];try {d = _this.Data //_this.Data.Rows[i][j].text,這是獲取xml中維度和表達式的方法。for (var i = 0; i < d.Rows.length; i++) {var r = d.Rows[i];obj = {name: r[0].text,value: parseFloat(r[1].text)};if (maxValue < obj.value) { maxValue = obj.value };if (minValue > obj.value) { minValue = obj.value };mapData.push(obj);}var mapFile = _this.Layout.Text0.text.toString(); //這是獲取xml中設置參數的方法。var colors = _this.Layout.Text1.text.split(';');var colorType = _this.Layout.Text2.text.toString();var Piecewise_Lower = parseFloat(_this.Layout.Text3.text.split(';')[0]);var Piecewise_Upper = parseFloat(_this.Layout.Text3.text.split(';')[1]);//set default valueif ('' == maxValue) maxValue = 100;if ('' == minValue) minValue = 0;if ('' == colors) colors = ['lightskyblue', 'yellow', 'orangered'];if ('' == colorType) colorType = 0;//set colorParameter if (colorType == 0) {colorParameter = {type: 'continuous',min: minValue,max: maxValue,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: colors,//['lightskyblue','yellow', 'orangered'],symbolSize: [30, 100]}}}else {colorParameter = {type: 'piecewise',pieces: [{ min: Piecewise_Upper, color: colors[2] },{ min: Piecewise_Lower, max: Piecewise_Upper, color: colors[1] },{ max: Piecewise_Lower, color: colors[0] }],left: 'left',top: 'bottom'}}//Loading up the js files via the QlikView api that allows an array to be passed. //After we load them up successfully, initialize the chart settings and append the chartQv.LoadExtensionScripts(jsFiles, function () { //載入jsFiles array中的文件 InitSettings();Init();if ('' != mapFile) { //空值判斷，以免報錯 InitChart(mapFile, mapData, maxValue, minValue);} else {$(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the MapFile?</div> ');}});}catch (err) {$(mapchart).html('<div id="errormsg">There was an issue creating the map. Did you forget to set the Extensions?</div> ');}function InitSettings() {_this.ExtSettings.UniqueId = _this.Layout.ObjectId.replace('\\', '_'); //獲取qv對象id }function Init() {$(_this.Element).empty();mapchart = document.createElement("div"); //創建地圖容器$(mapchart).attr('id', 'Chart_' + _this.ExtSettings.UniqueId);$(mapchart).height('100%');$(mapchart).width('100%');$(_this.Element).append(mapchart);}function InitChart(mapFile, mapData, maxValue, minValue) {try {var myChart = echarts.init(document.getElementById('Chart_' + _this.ExtSettings.UniqueId));myChart.showLoading();$.ajaxSetup({async: false});$.get(_this.ExtSettings.LoadUrl + 'Extensions/EChartsGeoMap/lib/maps/' + mapFile + '.json').done(function (geoJson) {myChart.hideLoading();echarts.registerMap(mapFile, geoJson);option = {tooltip: {trigger: 'item'},toolbox: {show: true,left: 'left',top: 'top',feature: {dataView: { readOnly: false }}},visualMap: colorParameter,series: [{name: 'data',type: 'map',mapType: mapFile,selectedMode: 'multiple',itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: mapData}]};myChart.setOption(option);});//ckick myChart.on('click', function (params) {_this.Data.SelectRow(params.dataIndex); //單擊地圖會選中當前維度中值。 });}catch (err) {if (typeof map != 'undefined') {map.remove();}$(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> ');}}}); };EChartsGeoMap_Init();

　　qv向插件傳值的時候會把維度和表達式的值組合成一個數組傳到js中。

　　this.Data.Rows對應xml中的維度和表達式。[i][j].text，i代表行號，j 代表列號。

　　設置值會打包成另一個數組傳進來。

　　_this.Layout.Text0.text.toString()中的Text0對應xml中的 <Text Label="MapFile" Type="text" Initial="" Expression="china"/>

源代碼

最后附上github地址：

Qlikview-Extension-ECharts-Map

轉載于:https://www.cnblogs.com/moiam/p/6257217.html

總結

以上是生活随笔為你收集整理的qlikview 地图插件制作教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python爬虫案例——爬取豆瓣图书信息
下一篇：减小pdf大小打印低分辨率