Estaba tratando de agregar un patrón de puntos al mapa mundial... usando highmaps y pattern-fill.js. Al hacer eso, doy mapas básicos sin color.
Usé la siguiente plantilla para lo mismo... Ayúdame a hacerlo bien.
El objetivo es obtener un mapa mundial de continentes donde todos los continentes estén rellenos de patrón y el patrón sea como el siguiente:
(async () => { const topology = await fetch( 'https://code.highcharts.com/mapdata/custom/world-continents.topo.json' ).then(response => response.json()); // Prepare demo data. The data is joined to map using value of 'hc-key' // property by default. See API docs for 'joinBy' for more info on linking // data and map. const data = [ ['eu', 10], ['oc', 11], ['af', 12], ['as', 13], ['na', 14], ['sa', 15] ]; // Create the chart Highcharts.mapChart('container', { chart: { type: 'map', map: topology }, title: { text: 'Highcharts Maps basic demo' }, subtitle: { text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.topo.json">World continents</a>' }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, colorAxis: { min: 0 }, plotOptions: { series: { type: "map", color: { pattern: { path: { d: 'M 3 3 L 8 3 L 8 8 Z', fill: '#102045' }, width: 12, height: 12, color: '#907000', opacity: 0.5 } } } }, series: [{ data: data, name: 'Random data', color: 'red', dataLabels: { enabled: true, format: '{point.name}' } }] }); })();Su configuración de color en plotOptions se sobrescribe con color en las opciones de serie. Debe especificar el color en uno de los lugares.
plotOptions: { series: { type: "map", color: { pattern: { path: { d: 'M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0', fill: 'red' }, patternTransform: 'rotate(20)', width: 12, height: 12, color: 'red' } } } }Demostración en vivo: http://jsfiddle.net/BlackLabel/p60e79sw/
Documentos: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills