和图表进行交互
基于静态数据
页面结构
chart
用于存放图表,controls
存放控件
1 | <body> |
1 | #chart { |
包含需要的库
1 | <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
数据组织
原始数据
1
2
3
4
5
6
7
8
9
10
11
12var eas = [[1960,0.155758351823196],[1961,0.154708338465889], ...,[2011,18.80024281251]];
var ecs = [[1960,0.442123789761523],[1961,0.470625042294723], ...,[2011,22.1459396328311]];
// data set continue
var source = [
{ data: eas, show: true, color: "#E41A1C", label: "East Asia & Pacific", name: "East Asia & Pacific" },
{ data: ecs, show: true, color: "#377EB8", label: "Europe & Central Asia", name: "Europe & Central Asia" },
{ data: lcn, show: true, color: "#4DAF4A", label: "Latin America & Caribbean", name: "Latin America & Caribbean" },
{ data: mea, show: true, color: "#984EA3", label: "Middle East & North Africa", name: "Middle East & North Africa" },
{ data: sas, show: true, color: "#FF7F00", label: "South Asia", name: "South Asia" },
{ data: ssf, show: true, color: "#FFFF33", label: "Sub-Saharan Africa", name: "Sub-Saharan Africa" },
];数据筛选
通过
jQuery
封装好的$.map()
和$grep()
分别实现数据的转化和过滤GDP折线图使用的数据
1
2
3
4
5
6
7
8var data = $.map($.grep(source, function(obj) {
return obj.show;
}), function(obj) {
return {
data: obj.data,
color: obj.color,
};
});各个地区GDP数据集
1
2
3
4
5
6var area_data = $.map(source, function(obj) {
return {
label: obj.label,
data: obj.data
};
});
添加复选框控件
通过
$.each()
遍历地区数组,添加复选框控件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25$.each(source, function(idx, region) {
// 创建id为chk-idx的input控件
var input = $('<input>').attr('type', 'checkbox').attr('id', 'chk-' + idx);
// 如果show为true,则checked属性设置为true
if (region.show) {
$(input).prop('checked', true);
}
// 创建用作色块的<span>标签,并添加css样式
var span = $('<span>').css({
'background-color': region.color,
'height': '0.9em',
'width': '0.9em',
'margin-right': '0.25em',
'display': 'inline-block'
});
// 将<input>、<span>和地区的名字都放在<label>元素里,最后在将其添加到文档
// 不用每创建一个标签就向文档中插入,每插入一次浏览器就需要重新计算页面布局
// 使用局部变量保存,最后在插入,可以极大的提高性能
var label = $('<label>').append(input).append(span).append(region.name);
$('#controls').append(label);
});动态创建并绘制图表以后
1
var plotObj = $.plot($('#chart'), data);
监视控件的单击
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19$("input[id^='chk-']").click(function(ev) {
// 跳过chk-这四个字符获取id
idx = ev.target.id.substr(4);
// 单击后重新设置show
source[idx].show = !source[idx].show;
// 重置数据并重绘图表
plotObj.setData($.map(
$.grep(source, function(obj) {
return obj.show;
}), function(obj) {
return {
data: obj.data,
color: obj.color
};
}));
plotObj.draw();
});
缩放图表
添加一个
selection
选项,mode
表示支持的方向1
2
3var options = {
selection: { mode: 'xy' }
};通过
on()
函数为时间指派函数1
2
3
4
5
6$('#chart').on('plotselected', function(ev, ranges) {
plotObj = $.plot($('#chart'), data, $.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
}));
});设置RESET按钮
1
2
3
4<div id="controls">
<button id="unzoom">RESET ZOOM</button>
<p>Select Regions to Include:</p>
</div>1
2
3#controls p, button {
margin-left: 10px;
}1
2
3$('#unzoom').click(function() {
plotObj = $.plot($('#chart'), data, options);
});
追踪数据的值
页面布局
1 | <div id="chart-wrapper"> |
1 | #chart-wrapper { |
数据组织
1 | var area_data = $.map(source, function(obj) { |
绘制图表
创建新的div,设置样式,插入到
area_data
中1
2
3
4
5
6
7
8$.each(area_data, function(idx, region) {
var div = $('<div>').css({
width: '600px',
height: '50px'
});
region.div = div;
$('#area-chart').append(div);
});设置好每个图表的div以后,分别设置网格线和坐标轴,以及标注
1
2
3
4
5
6
7
8
9
10
11
12$.plot(div, [region.data], {
series: {
lines: { fill: true, lineWidth: 1 },
shadowSize: 0
},
xaxis: { show: true, labelHeight: 0, min: 1960, max: 2011,
tickFormatter: function() { return ''; } },
yaxis: { show: false, min: 0, max: 60 },
grid: { show: true, margin: 0, borderWidth: 0,
borderColor: null, margin: 0, labelMargin: 0,
axisMargin: 0, minBorderMargin: 0, hoverable: true, autoHighlight: false }
});1
2
3
4
5
6
7
8var legend = $('<p>').text(region.label).css({
'height': '17px',
'margin-bottom': "0",
'margin-left': "10px",
'margin-top': "0",
'padding-top': "33px"
});
$("#legends").append(legend);为图表x轴添加标注,通过创建虚拟的图表并定位在原图表下面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18var xaxis_label = [];
for (var year = 1960; year < 2012; year++) {
xaxis_label.push([year, 0]);
}
var div = $('<div>').css({
width: '600px',
height: '15px'
});
$('#area-chart').append(div);
var xaxisPlot = $.plot(div, [xaxis_label], {
xaxis: { show: true, labelHeight: 12, min: 1960, max: 2011 },
yaxis: { show: false, min: 100, max: 200 },
grid: { show: true, margin: 0, borderWidth: 0, margin: 0,
labelMargin: 0, axisMargin: 0, minBorderMargin: 0, }
});
添加交互
将
plot()
函数的grid
选项的hoverable
属性设置为true
,鼠标在图标区移动时,Flot将在鼠标移动到图表区域触发plothover
事件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38$('#area-chart').on('plothover', function(ev, pos) {
var year = Math.round(pos.x);
var left = xaxisPlot.pointOffset(pos).left;
var height = $('#area-chart').height();
$('#marker').css({
'top': 0,
'left': left,
'width': '1px',
'height': height
}).show();
$.each(area_data, function(idx, region) {
// 为每个图表设置文本值
matched = $.grep(region.data, function(pt) { return pt[0] === year; });
if (matched.length > 0) {
region.value.text(year + ": " + matched[0][1].toFixed(2) + "%");
} else {
region.value.text("");
}
region.value.css("left", (left+4)+"px").show();
});
}).on('mouseout', function(ev) {
if (ev.relatedTarget.id !== 'marker') {
$('#marker').hide();
$.each(area_data, function(idx, region) {
region.value.hide();
})
}
});
// 若将鼠标沿着marker移出图表,将marker隐藏
$("#marker").on("mouseout", function(ev) {
$("#marker").hide();
$.each(area_data, function(idx, region) {
region.value.hide();
});
});