Integrar mapas Highcharts com o componente react
Estou tentando integrar carrinhos dentro do componente de reação.
Aqui está o meu código para o componente react
import * as Highcharts from 'highcharts/highmaps'
class RealTime extends Component {
componentDidMount() {
$.getJSON( 'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/world-population-density.json',
function(data) {
$.each(data, function() {
this.value = this.value < 1 ? 1 : this.value
})
Highcharts.mapChart('world_map', {
chart: {
map: 'custom/world'
},
title: {
text: 'Fixed tooltip with HTML'
},
legend: {
title: {
text: 'Population density per km²',
style: {
color:
(Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [
{
data: data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a3', 'code3'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
}
}
]
})
}
)
}
render() {
return (
<div>
<div className="map_bg" id="world_map"/>
</div>
)
}
}
Mas o código acima não mostra o mapa ou qualquer erro no meu componente de reação. Alguém por favor pode me ajudar O que estou perdendo aqui?
Obrigado!!