Highcharts 中文社区

 找回密码
 立即注册
查看: 80|回复: 0

[提问帖] highcharts-react 库 mappoint 类型无效

[复制链接]

该用户从未签到

2

主题

2

帖子

15

积分

HC 新手

Rank: 1

积分
15
发表于 2019-5-6 14:55:14 | 显示全部楼层 |阅读模式
本帖最后由 jjzjx118 于 2019-5-6 15:00 编辑

在 React 中使用 highmaps, 使用官方的React库 https://github.com/highcharts/highcharts-react  
配置代码:
  1. import React from "react";
  2. import { Component } from "react";
  3. import { render } from "react-dom";
  4. import Highcharts from "highcharts";
  5. import HC_map from "highcharts/modules/map";
  6. import HighchartsReact from "highcharts-react-official";
  7. import mapData from "./mapdata.js";
  8. import usaMapData from "./UsaMapData.js";
  9. import usaBubbleData from "./usaBubbleData";

  10. HC_map(Highcharts);

  11. const mapOptions = {
  12.         title: {
  13.                 text: "Highmaps basic lat/lon demo"
  14.         },
  15.         series: [
  16.                 {
  17.                         mapData: usaMapData,
  18.                         name: "Basemap",
  19.                         borderColor: "#A0A0A0",
  20.                         nullColor: "rgba(200, 200, 200, 0.3)",
  21.                         showInLegend: false
  22.                 },
  23.                 {
  24.                         type: "mappoint",
  25.                         name: "Cities",
  26.                         color: "#7cb5ec",
  27.                         showInLegend: false,
  28.                         data: [
  29.                                 {
  30.                                         name: "Montgomery",
  31.                                         lat: 32.38012,
  32.                                         lon: -86.300629
  33.                                 }
  34.                                 // {
  35.                                 //         name: "Montgomery",
  36.                                 //         lat: 32.38012,
  37.                                 //         lon: -86.300629
  38.                                 // }
  39.                         ]
  40.                 }
  41.         ]
  42. };

  43. export default class Mapdemo extends Component {
  44.         // eslint-disable-next-line no-useless-constructor
  45.         constructor(props) {
  46.                 super(props);
  47.         }

  48.         render() {
  49.                 console.dir(usaBubbleData);
  50.                 return (
  51.                         <div className='container'>
  52.                                 <HighchartsReact
  53.                                         highcharts={Highcharts}
  54.                                         constructorType={"mapChart"}
  55.                                         options={mapOptions}
  56.                                 />
  57.                         </div>
  58.                 );
  59.         }
  60. }
复制代码
但是仅仅是地图显示了 point 没有显示, 然而编辑官方代码是可以的:
https://codepen.io/jjzjx118/pen/OYJrWp

配置是一模一样的 不知道哪里漏掉了或者是这个 react 封装库不支持 mappoint 类型?
____________________________________________________________________
更新 , 找到原因了 要使用 x , y 而不是 lat , lon
  1. data: [
  2.                                 {
  3.                                         name: "Montgomery",
  4.                                         x: 6686,
  5.                                         y: -4961
  6.                                         // lat: 32.38012,
  7.                                         // lon: -86.300629
  8.                                 }
复制代码
这样配置是可以显示的, 但是问题是要如何把 lat 和 lon 转换为 x , y ?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表