qlikview 扩展插件制作教程-EchartsGeoMap
效果图
显示效果和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
/*! 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 array
jsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/jquery.min.js');
jsFiles.push('Extensions/' + _this.ExtSettings.ExtensionName + '/lib/js/echarts.min.js'); //get qv value
var 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 value
if ('' == 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 chart
Qv.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
qlikview 扩展插件制作教程-EchartsGeoMap的更多相关文章
- WordPress插件制作教程(八): 最后总结
WordPress插件教程最后一篇,还是为大家简单的做下总结.这次插件制作教程讲的内容和知识点个人觉得不是很多,因为插件制作不单单是这些内容,它涉及的知识很多很多,不是说你会一些函数就可以做出一个好的 ...
- WordPress插件制作教程(一): 如何创建一个插件
上一篇还是按照之前的教程流程,写了一篇WordPress插件制作教程概述,从这一篇开始就为大家具体讲解WordPress插件制作的内容.这一篇主要说一下插件的创建方法. 相信大家都知道插件的安装文件在 ...
- WordPress插件制作教程概述
接下来的一段时间里,开始为大家讲解WordPress插件制作系列教程,这篇主要是对WordPress插件的一些介绍和说明,还有一些我们需要注意的地方,以及需要掌握的知识. WordPress插件允许你 ...
- 【超酷超实用】CSS3可滑动跳转的分页插件制作教程
原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...
- WordPress插件制作教程(六): 插件函数之动作(Actions)函数
这一篇为大家说一下WordPress插件函数吧,要制作插件,了解这些函数是非常有必要的 WordPress插件函数分为“动作”(Actions)和过滤器”(Filters),WordPress 使用这 ...
- WordPress插件制作教程(三): 添加菜单的方法
上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...
- WordPress插件制作教程(二): 编写一个简单的插件
上一篇说到了如何创建一个插件,我想大家看了之后一定会有所收获,这一篇简单给大家写一个插件样例,让大家有一个基本的印象.这个插件的样例就是当你激活这个插件后会在你的每篇文章中插入一段自己定义好的内容,比 ...
- jquery插件制作教程 txtHover(转载)
http://www.jb51.net/article/31082.htm 该系列文章是我阅读<jQuery Plugin Development Beginner's Guide>后的总 ...
- WordPress插件制作教程(七): 插件函数之过滤器(Filter)函数
上一篇对插件函数之动作(Action)函数做了下介绍,这篇在介绍下过滤器(Filters). 过滤器是一类函数,WordPress执行传递和处理数据的过程中,在针对这些数据做出某些动作之前的特定运行( ...
随机推荐
- [LeetCode] Nth Digit 第N位
Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note: n i ...
- js中this关键字测试集锦
参考:阮一峰<javascript的this用法>及<JS中this关键字详解> this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在 ...
- JavaScript中---作用域
作用域: 变量还有函数作用的范围. 浏览器的内核主要有两大功能,一个是渲染页面,另一个就是我们的JavaScript的解释器了. 我们主要来说说JavaScript解释器,在解析时是怎么样的工作原理. ...
- BZOJ 后缀自动机四·重复旋律7
后缀自动机四·重复旋律7 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段数构成的数列. 神奇的 ...
- STL的使用
Vector:不定长数组 Vector是C++里的不定长数组,相比传统数组vector主要更灵活,便于节省空间,邻接表的实现等.而且它在STL中时间效率也很高效:几乎与数组不相上下. #include ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- 一键批量添加材质的法线贴图-unity插件
有时候材质做完后需要更改贴图,或者增加贴图,数量少的时候可以一张张添加和修改,数量多的时候就只能代码生成了.原理是通过名字的关联:主贴图和法线贴图大多数只是后缀的不同上,如果不是那是美术规范没做好啊, ...
- JavaScript 中 Number()、parseInt()、parseFloat()的区别
Number(): 概述:Number 对象由 Number() 构造器创建,是经过封装的能让你处理数字值的对象.在非构造器上下文中 (如:没有 new 操作符),Number 能被用来执行类型转换. ...
- git pull和git fetch的区别
Git中从远程的分支获取最新的版本到本地有这样2个命令:1. git fetch:相当于是从远程获取最新版本到本地,不会自动merge Git fetch origin master git log ...
- 碳膜电阻+1N5408二极管?
整定电流: 整定: 调整, 确定, 是指某一物理量,到达某个一个设定值时, 设备开始动作. 主要是指电路中的一些起 保护作用的 继电器, 如: 电机, 控制电路中的 过电流继电器, 的整定值. 如空气 ...