原創|產品更新|編輯:龔雪|2014-07-25 09:37:52.000|閱讀 2461 次
概述:從今天開始,我們將為大家帶來Highcharts的擴展組件Highmaps的示例(Demo)操作,大家可以根據文章中提供的代碼,結合演示效果學習如何使用Highmaps。本文為第一章,講Highmaps概覽(Overview)、顏色軸和數據標(Color axis and data labels) 。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Highmaps作為Highcharts的擴展組件,既可以單獨使用,也可以結合Highcharts使用。為了幫之大家更好的使用HIghmaps,從今天開始,我們將為大家帶來Highmaps的示例(Demo)操作,大家可以根據文章中提供的代碼,結合演示效果學習如何使用Highmaps。
本文講解Highmaps的基本情況(Overview )、色軸和數據標簽(Color axis and data labels )。

$(function () {
/**
* This is a complicated demo of Highmaps, not intended to get you up to speed
* quickly, but to show off some basic maps and features in one single place.
* For the basic demo, check out //www.highcharts.com/maps/demo/geojson instead.
*/
// Base path to maps
var baseMapPath = "//code.highcharts.com/mapdata/",
showDataLabels = false, // Switch for data labels enabled/disabled
mapCount = 0,
searchText,
mapOptions = '';
// Populate dropdown menus and turn into jQuery UI widgets
$.each(Highcharts.mapDataIndex, function (mapGroup, maps) {
if (mapGroup !== "version") {
mapOptions += '<option class="option-header">' + mapGroup + '</option>';
$.each(maps, function (desc, path) {
mapOptions += '<option value="' + path + '">' + desc + '</option>';
mapCount++;
});
}
});
searchText = 'Search ' + mapCount + ' maps';
mapOptions = '<option value="custom/world.js">' + searchText + '</option>' + mapOptions;
$("#mapDropdown").append(mapOptions).combobox();
// Change map when item selected in dropdown
$("#mapDropdown").change(function () {
var $selectedItem = $("option:selected", this),
mapDesc = $selectedItem.text(),
mapKey = this.value.slice(0, -3),
svgPath = baseMapPath + mapKey + '.svg',
geojsonPath = baseMapPath + mapKey + '.geo.json',
javascriptPath = baseMapPath + this.value,
isHeader = $selectedItem.hasClass('option-header');
// Dim or highlight search box
if (mapDesc === searchText || isHeader) {
$('.custom-combobox-input').removeClass('valid');
location.hash = '';
} else {
$('.custom-combobox-input').addClass('valid');
location.hash = mapKey;
}
if (isHeader) {
return false;
}
// Show loading
if ($("#container").highcharts()) {
$("#container").highcharts().showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>');
}
// When the map is loaded or ready from cache...
function mapReady () {
var mapGeoJSON = Highcharts.maps[mapKey],
data = [],
parent,
match;
// Update info box download links
$("#download").html('<a class="button" target="_blank" href="//www.highcharts.com/samples/maps-base.php?mapkey=' + mapKey + '">' +
'View clean demo</a>' +
'<div class="or-view-as">... or view as ' +
'<a target="_blank" href="' + svgPath + '">SVG</a>, ' +
'<a target="_blank" href="' + geojsonPath + '">GeoJSON</a>, ' +
'<a target="_blank" href="' + javascriptPath + '">JavaScript</a>.</div>');
// Generate non-random data for the map
$.each(mapGeoJSON.features, function (index, feature) {
data.push({
key: feature.properties['hc-key'],
value: index
});
});
// Show arrows the first time a real map is shown
if (mapDesc !== searchText) {
$('.selector .prev-next').show();
$('#sideBox').show();
}
// Is there a layer above this?
if (/^countries\/[a-z]{2}\/[a-z]{2}-all$/.test(mapKey)) { // country
parent = {
desc: 'World',
key: 'custom/world'
};
} else if (match = mapKey.match(/^(countries\/[a-z]{2}\/[a-z]{2})-[a-z0-9]+-all$/)) { // admin1
parent = {
desc: $('option[value="' + match[1] + '-all.js"]').text(),
key: match[1] + '-all'
};
}
$('#up').html('');
if (parent) {
$('#up').append(
$('<a><i class="fa fa-angle-up"></i> ' + parent.desc + '</a>')
.attr({
title: parent.key
})
.click(function () {
$('#mapDropdown').val(parent.key + '.js').change();
})
);
}
// Instantiate chart
$("#container").highcharts('Map', {
title: {
text: null
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 0,
stops: [
[0, '#EFEFFF'],
[0.5, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
]
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom'
},
series: [{
data: data,
mapData: mapGeoJSON,
joinBy: ['hc-key', 'key'],
name: 'Random data',
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
dataLabels: {
enabled: showDataLabels,
formatter: function () {
return mapKey === 'custom/world' || mapKey === 'countries/us/us-all' ?
(this.point.properties && this.point.properties['hc-a2']) :
this.point.name;
}
},
point: {
events: {
// On click, look for a detailed map
click: function () {
var key = this.key;
$('#mapDropdown option').each(function (i) {
if (this.value === 'countries/' + key.substr(0, 2) + '/' + key + '-all.js') {
$('#mapDropdown').val(this.value).change();
}
});
}
}
}
}, {
type: 'mapline',
name: "Separators",
data: Highcharts.geojson(mapGeoJSON, 'mapline'),
nullColor: 'gray',
showInLegend: false,
enableMouseTracking: false
}]
});
showDataLabels = $("#chkDataLabels").attr('checked');
}
// Check whether the map is already loaded, else load it and
// then show it async
if (Highcharts.maps[mapKey]) {
mapReady();
} else {
$.getScript(javascriptPath, mapReady);
}
});
// Toggle data labels - Note: Reloads map with new random data
$("#chkDataLabels").change(function () {
showDataLabels = $("#chkDataLabels").attr('checked');
$("#mapDropdown").change();
});
// Switch to previous map on button click
$("#btn-prev-map").click(function () {
$("#mapDropdown option:selected").prev("option").prop("selected", true).change();
});
// Switch to next map on button click
$("#btn-next-map").click(function () {
$("#mapDropdown option:selected").next("option").prop("selected", true).change();
});
// Trigger change event to load map on startup
if (location.hash) {
$('#mapDropdown').val(location.hash.substr(1) + '.js');
} else { // for IE9
$($('#mapDropdown option')[0]).attr('selected', 'selected');
}
$('#mapDropdown').change();
});

$(function () {
$.getJSON('//www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
// Instanciate the map
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title : {
text : 'US population density (/km²)'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series : [{
animation: {
duration: 1000
},
data : data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: 'white',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
});
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件網