如何用highcharts-反应绘制点? [英] How to draw points with highcharts-react?

问题描述

我正在使用highcharts-react，这是highcharts的包装.我期望的是: https://jshare.com.cn/highmaps/hhhhAf 我需要一张地图，并在地图上画点.现在很简单.区别在于我要使用美国地图.到目前为止，我到了这里: 一张纯净的美国地图，我尝试在地图中添加一些点.但这不起作用.

I'm using highcharts-react , this a wrapper of highcharts. what I expect is like: https://jshare.com.cn/highmaps/hhhhAf I need a map , and draw some point in the map. quite simple for now. the difference is I want use a USA map. so far I got here: a pure USA map , and I try to add some points into the map . but it doesn't work.

代码在这里:

import React from "react";
import { Component } from "react";
import { render } from "react-dom";
import Highcharts from "highcharts";
import HC_map from "highcharts/modules/map";
import HighchartsReact from "highcharts-react-official";
import mapData from "./mapdata.js";
import usaMapData from "./UsaMapData.js";
import usaBubbleData from "./usaBubbleData";

HC_map(Highcharts);

const mapOptions = {
    title: {
        text: "Map-Demo"
    },
    tooltip: {
        formatter: function() {
            return (
                this.point.capital +
                ", " +
                this.point.parentState +
                "<br>Lat: " +
                this.point.lat +
                " Lon: " +
                this.point.lon +
                "<br>Population: " +
                this.point.population
            );
        }
    },
    mapNavigation: {
        enabled: false
    },
    series: [
        {
            name: "Basemap",
            mapData: usaMapData,
            borderColor: "#606060",
            nullColor: "rgba(200, 200, 200, 0.2)",
            showInLegend: false
        },
        {
            type: "mappoint",
            name: "Cities",
            color: "#7cb5ec",
            data: [
                {
                    name: "Montgomery",
                    lat: 32.38012,
                    lon: -86.300629
                },
                {
                    name: "Juneau",
                    lat: 58.29974,
                    lon: -134.406794
                },
                {
                    name: "Phoenix",
                    lat: 33.44826,
                    lon: -112.075774
                },
                {
                    name: "Little Rock",
                    lat: 34.748655,
                    lon: -92.274494
                }
            ]
        }
        // {
        //   type: "mappoint",
        //   dataLabels: {
        //     enabled: true,
        //     format: "{point.capital}"
        //   },
        //   name: "Cities",
        //   data: usaBubbleData,
        //   maxSize: "15%",
        //   color: "#7cb5ec"
        // }
    ]
};

export default class Mapdemo extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }

    render() {
        console.dir(usaBubbleData);
        return (
            <div>
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={"mapChart"}
                    options={mapOptions}
                />
            </div>
        );
    }
}

有人可以帮助我吗?

推荐答案

我已经通过使用proj4解决了这个问题

I have fix this by using proj4

第一步:安装proj4 npm install proj4

Step1 : install proj4 npm install proj4

Step2:导入到项目中 import proj4 from "proj4";

Step2 : import into project import proj4 from "proj4";

Step3:将proj4绑定到窗口: window.proj4 = proj4;

Step3 : bind proj4 to window: window.proj4 = proj4;

现在纬度/经度可以正确的方式工作.

and now the lat/lon can be work in the right way.

这篇关于如何用highcharts-反应绘制点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！