$(function () { // Modificamos el theme por defecto de Highcharts (colores, tipo y tamaño de fuente...) Highcharts.theme = { colors: ['#FDBB30', '#CCC'], chart: { backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] }, }, title: { style: { color: '#333', font: 'bold 16px "Verdana, sans-serif' } }, subtitle: { style: { color: '#666666', font: 'bold 12px " Verdana, sans-serif' } }, legend: { itemStyle: { font: '9pt Verdana, sans-serif', color: 'black' }, itemHoverStyle: { color: 'gray' } } }; // Aplicamos los cambios en el theme Highcharts.setOptions(Highcharts.theme); // Preparamos los datos a mostrar en el mapa // 'hc-key' es el 'id' de cada provincia en el fichero geojson var data = [{ 'hc-key': 'es-pm', value: 0 }, { 'hc-key': 'es-vi', value: 1 }, { 'hc-key': 'es-ce', value: 2 }, { 'hc-key': 'es-gr', value: 3 }, { 'hc-key': 'es-cb', value: 4 }, { 'hc-key': 'es-na', value: 5 }, { 'hc-key': 'es-mu', value: 6 }, { 'hc-key': 'es-sa', value: 15 }, { 'hc-key': 'es-ex', value: 25 }, { 'hc-key': 'es-se', value: 50 }, { 'hc-key': 'es-ss', value: 99 }]; // Creamos el mapa $('#container').highcharts('Map', { title: { text: 'Visitas por provincia' }, subtitle: { text: 'Ejemplo de implementación' }, // Zoom para el mapa mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, // Colores aplicados en el mapa colorAxis: { // Rango mínimo y máximo de visitas min: 0, max: 100, // Colores aplicados al rango de valores anterior minColor: '#eeeeee', maxColor: '#FDBB30' }, series: [ { // Datos a mostrar en el mapa data: data, // Cargamos el fichero geojson que se encarga de pintar el mapa mapData: Highcharts.maps['countries/es/es-all'], joinBy: 'hc-key', name: 'Visitas', states: { hover: { color: '#ccc' } }, dataLabels: { enabled: true, format: '{point.name}' } }, { // Separador para las Islas Canarias name: 'Separators', type: 'mapline', data: Highcharts.geojson(Highcharts.maps['countries/es/es-all'], 'mapline'), color: '#FDBB30', showInLegend: true, enableMouseTracking: false }] }); });
<!--Highmaps--> <script src="https://code.highcharts.com/maps/highmaps.js"></script> <!--Plugin para exportar el gráfico como PDF, PNG, JPG--> <script src="https://code.highcharts.com/maps/modules/exporting.js"></script> <!--Fichero geojson para España proporcionado por Highchart Source: http://code.highcharts.com/mapdata/ --> <script src="https://code.highcharts.com/mapdata/countries/es/es-all.js"></script> <!--Contenedor del mapa--> <div id="container"></div>
#container { height: 600px; min-width: 310px; max-width: 700px; margin: 0 auto; } .loading { margin-top: 10em; text-align: center; color: gray; }