原创|产品更新|编辑:龚雪|2014-07-25 09:37:52.000|阅读 2420 次
概述:从今天开始,我们将为大家带来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@pclwef.cn
文章转载自:慧都控件网