Tengo 5 días intentando cambiar de zona de color, este es el código:
[https://jsfiddle.net/gerarca/7sg1c4nz/187/][1]Solo quiero cambiar el color de fondo en un evento, como:
ingrese la descripción de la imagen aquí
Si coloco el puntero del mouse sobre un departamento, se debe resaltar un área en rojo, el área a la que pertenece el departamento.
Traté de hacerlo usando múltiples overs, pero esta propiedad solo se puede usar una vez y no funciona.
donde me equivoco??
Agregue esto a su archivo css:
.highcharts-series-group path:hover { fill: rgba(249, 209, 12, 0.87); // or whatever color }Cada departamento en su ejemplo se refiere a un punto en la serie. Si desea cambiar el colour del punto flotante, puede usar, es decir point.events para lograrlo:
point: { events: { mouseOver: function() { originalColor = this.color; this.update({ color: '#5F9EA0' }); }, mouseOut: function() { this.update({ color: originalColor }); } } } Pero si desea cambiar el colour de las zonas y habilitar las dataLabels de datos al pasar el mouse, como muestra la imagen, sería mejor crear zonas como una serie separada. Entonces podrá actualizar fácilmente estas series después del evento mouseOver .
Highcharts.mapChart('container', { chart: { map: topology }, title: { text: '' }, plotOptions: { series: { dataLabels: { enabled: false, color: 'white', format: '{point.name}' }, color: 'grey', allAreas: false, states: { hover: { color: 'red' } }, events: { mouseOver: function() { this.update({ color: 'red', dataLabels: { enabled: true } }, false) chart.update({}, true, false, false); }, mouseOut: function() { this.update({ color: 'grey', dataLabels: { enabled: false } }, false) chart.update({}, true, false, false); } } }, }, series: [{ data: zone1, name: 'zone 1' }, { data: zone2, name: 'zone 2' }, { data: zone3, name: 'zone 3' }, { data: zone4, name: 'zone 4' }, { data: zone5, name: 'zone 5' } ] });Manifestación:
https://jsfiddle.net/BlackLabel/296ujzf4/
Referencias API:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver https://api.highcharts.com/class-reference/Highcharts.Series#update