我想使用 Highcharts
库在 react
项目中绘制带有气泡的 map (气泡图)
。
这些是我的要求:
绘制 map
在 map 上显示特定点/位置(气泡)。 (我们有 位置的经度和纬度)
- 所以我们有位置列表:位置名称、经度和纬度。我们想在 map 上用气泡显示这些位置
这是我在react(类组件)中的源代码:
import React, { Component, Fragment } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMap from "highcharts/modules/map";
import mapData from "@highcharts/map-collection/countries/gb/gb-all.geo.json";
HighchartsMap(Highcharts);
class BubbleMapChart extends Component {
render() {
const options = {
chart: {
map: "countries/gb/gb-all",
},
title: null,
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: "bottom",
},
},
series: [
{
name: "Basemap",
borderColor: "#A0A0A0",
nullColor: "rgba(200, 200, 200, 0.3)",
showInLegend: false,
mapData: mapData,
},
{
name: "Separators",
type: "mapline",
nullColor: "#707070",
showInLegend: false,
enableMouseTracking: false,
},
{
// Specify points using lat/lon
type: "mappoint",
name: "Cities",
color: "red",
data: [
{
name: "London",
lat: 51.507222,
lon: -0.1275,
},
{
name: "Birmingham",
lat: 52.483056,
lon: -1.893611,
},
{
name: "Leeds",
lat: 53.799722,
lon: -1.549167,
},
{
name: "Glasgow",
lat: 55.858,
lon: -4.259,
},
{
name: "Sheffield",
lat: 53.383611,
lon: -1.466944,
},
{
name: "Liverpool",
lat: 53.4,
lon: -3,
},
{
name: "Bristol",
lat: 51.45,
lon: -2.583333,
},
{
name: "Belfast",
lat: 54.597,
lon: -5.93,
},
{
name: "Lerwick",
lat: 60.155,
lon: -1.145,
dataLabels: {
align: "left",
x: 5,
verticalAlign: "middle",
},
},
],
},
],
};
return (
<Fragment>
<HighchartsReact
highcharts={Highcharts}
options={options}
constructorType={"mapChart"}
/>
</Fragment>
);
}
}
这是结果:
为什么没有显示气泡?
如何在 map 上显示位置? (请用 React 中的类组件示例来指导我)。我已经在 highcharts 网站上看到了示例,但在我的类组件 React 项目中无法做到这一点。
最佳答案
根据文档,Highcharts map 不直接支持经纬度,除非在 Highcharts map 之前加载 proj4js 库。这是因为 Highcharts map 内部不使用纬度/经度,它们使用 0 到 1000 秒的比例。因此,您使用的纬度/经度坐标可能不可见,因为它们不在 map 上。
了解更多information
关于javascript - 如何在React中使用Highcharts绘制带有经度和纬度的气泡图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66511111/