如何使用Highcharts在react中绘制带有经度和纬度的气泡图
How to draw a bubble map with longitude and latitude using Highcharts in react
我想在 react
项目中使用 Highcharts
库在其上绘制 map with bubbles (bubble map)
。
这些是我的要求:
绘制地图
在地图上显示特定的 points/locations(气泡)。 (我们有
位置的经度和纬度)
- 所以我们有位置列表:位置名称、经度和纬度。我们想在地图上用气泡显示这些位置
这是我在 React 中的源代码(class 组件):
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>
);
}
}
这是结果:
为什么不显示气泡?
如何在地图上显示位置? (请用 class 组件示例指导我做出反应)。我在 highcharts 网站上看到了示例,但我无法在我的 class 组件反应项目中这样做。
根据文档,除非在 Highcharts 地图之前加载 proj4js 库,否则 Highcharts 地图不直接支持纬度/经度。那是因为 Highcharts 地图内部不使用纬度/经度,它们使用从 0 到 1000 秒的比例。因此,您使用的纬度/经度坐标可能不可见,因为它们不在地图上。
您需要添加 proj4
: https://www.npmjs.com/package/proj4 以支持纬度/经度坐标。
import proj4 from "proj4";
class BubbleMapChart extends Component {
render() {
const options = {
chart: {
...,
proj4
},
...
}
}
现场演示: https://codesandbox.io/s/highcharts-react-demo-forked-rc4vf?file=/demo.jsx
我想在 react
项目中使用 Highcharts
库在其上绘制 map with bubbles (bubble map)
。
这些是我的要求:
绘制地图
在地图上显示特定的 points/locations(气泡)。 (我们有 位置的经度和纬度)
- 所以我们有位置列表:位置名称、经度和纬度。我们想在地图上用气泡显示这些位置
这是我在 React 中的源代码(class 组件):
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>
);
}
}
这是结果:
为什么不显示气泡?
如何在地图上显示位置? (请用 class 组件示例指导我做出反应)。我在 highcharts 网站上看到了示例,但我无法在我的 class 组件反应项目中这样做。
根据文档,除非在 Highcharts 地图之前加载 proj4js 库,否则 Highcharts 地图不直接支持纬度/经度。那是因为 Highcharts 地图内部不使用纬度/经度,它们使用从 0 到 1000 秒的比例。因此,您使用的纬度/经度坐标可能不可见,因为它们不在地图上。
您需要添加 proj4
: https://www.npmjs.com/package/proj4 以支持纬度/经度坐标。
import proj4 from "proj4";
class BubbleMapChart extends Component {
render() {
const options = {
chart: {
...,
proj4
},
...
}
}
现场演示: https://codesandbox.io/s/highcharts-react-demo-forked-rc4vf?file=/demo.jsx