qlikview 地图插件制作教程
生活随笔
收集整理的這篇文章主要介紹了
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="" /> //表達式<!--設置參數；Expression="" 設置默認值--><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
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大小 打印 低分辨率