Estoy creando un mapa de burbujas y tengo un problema con los tamaños de burbuja más pequeños que no se comportan como esperaba. Después de buscar un poco en la documentación para entender el problema, encontré esto:https://api.highcharts.com/highcharts/plotOptions.bubble.sizeBy
No quiero cambiar la configuración de 'sizeBy' de su Área predeterminada (que tiene más sentido para mis datos), pero hay un ejemplo útil junto con la entrada API en JSFiddle:
Highcharts.chart('container', { chart: { type: 'bubble', plotBorderWidth: 1, zoomType: 'xy' }, title: { text: 'Highcharts Bubbles Sizing' }, subtitle: { text: 'Smallest and largest bubbles are equal, intermediate bubbles different.' }, xAxis: { gridLineWidth: 1 }, yAxis: { startOnTick: false, endOnTick: false }, series: [{ data: [ [1, 1, 1], [2, 2, 2], [3, 3, 3], [4, 4, 4], [5, 5, 5] ], sizeBy: 'area', name: 'Size by area' }, { data: [ [1, 1, 1], [2, 2, 2], [3, 3, 3], [4, 4, 4], [5, 5, 5] ], sizeBy: 'width', name: 'Size by width' }] });Teniendo en cuenta que solo me interesa mostrar por Área (el valor predeterminado), lo que no entiendo del ejemplo es por qué la primera burbuja (que tiene un valor z de 1) es tan pequeña en comparación con las otras burbujas. Su área debe ser 0,5 veces el área de la segunda burbuja (que tiene un valor z de 2). Pero es mucho más pequeño (como 1/10 del área). Sin embargo, todas las demás burbujas parecen ser proporcionalmente correctas; en realidad, es solo la primera burbuja.
Así que mi pregunta es: ¿por qué la primera burbuja es tan pequeña y hay alguna forma de evitar que esto suceda para que todas las burbujas sean proporcionales según el área?
Muchas gracias de antemano,
David
Hacer un seguimiento:
Creé un ejemplo más extremo en jsFiddle con solo dos burbujas: una es la mitad del valor de la otra, por lo que su área (o ancho) también debería ser la mitad, pero no lo es.
https://jsfiddle.net/2m75nwhf/1/
Podría estar malinterpretando por completo la API, pero ahora pienso que esto probablemente sea solo un error.
Está buscando la propiedad minSize . En la API de Highcharts podemos leer:
minSize: número, cadena
Tamaño mínimo de burbuja. Las burbujas se dimensionarán automáticamente entre minSize y maxSize para reflejar el valor z de cada burbuja. Pueden ser píxeles (cuando no se proporciona ninguna unidad) o un porcentaje del más pequeño del ancho y la altura del gráfico.
Demostración en vivo: https://jsfiddle.net/BlackLabel/5kspqn1h/
Referencia API:
La forma en que arreglé esto por el momento es que creo un punto de datos falso con un valor que es más bajo que otros valores en el conjunto de datos. Estoy publicando aquí en caso de que alguien más tenga un problema similar. Si hubiera una manera de hacer esto a través de la API, sería preferible y eliminaría este código. Seguiré buscando una solución más elegante.
Después de dibujar el mapa de burbujas, elimino el punto de datos falso.
Así que tengo algo como;
var minValue = 0.0000000001; // some fake minimum value (or better, calculate it programmatically from the actual data) data.push({. // this is how I am structuring the data for my data set id: "fakeMinValue", lat: 50, // these lat/lon values give a location somewhere in France — it's important to make sure the lon/lat values are on within your actual map lon: 2, z: minValue })Luego dibujo mi mapa...
var bubbleMap = Highcharts.mapChart(containerID, { ... }y después de dibujarlo, en el código elimino el punto de datos falso con este comando:
bubbleMap.get('fakeMinValue').remove(false); // 'false' prevents HighMaps from redrawing the map without the fake data point which would otherwise defeat the purpose