如何在 Highcharts 中使用 react 组件作为标签？

大佬教程收集整理的这篇文章主要介绍了如何在 Highcharts 中使用 react 组件作为标签？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 Highcharts 中使用 react 组件作为标签？？

我有一个 bubble map chart 可以在地图上显示城市的位置。地图具有默认标签，但我想在地图上使用 custom react component 作为 label。这是我的源代码，但它有错误并且不起作用：

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";
import proj4 from "proj4";
import CustomLabel from "./CustomLabel";

HighchartsMap(Highcharts);

class BubbleMapChart extends Component {
  render() {
    const options = {
      chart: {
        map: "countrIEs/gb/gb-all",proj4
      },serIEs: [
        {
          name: "countrIEs",nullcolor: "#fff",showInLegend: false,mapData: mapData
        },{
          // Specify points using lat/lon
          type: "mapbubble",// PAY ATTENTION TO THIS SECTION - USE A CUSTOM LABEL COMPONENT
          dataLabels: {
            enabled: true,format: <CustomLabel name={"point.name"} />
          },minSize: "5%",maxSize: "15%",showInLegend: true,data: [
            {
              name: "London",lat: 51.507222,lon: -0.1275
            },{
              name: "Birmingham",lat: 52.483056,lon: -1.893611
            }
          ]
        }
      ]
    };

    return (
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
          constructorType={"mapChart"}
        />
    );
  }
}

这是一个 customLabel 组件作为示例：

 import React,{ Component } from "react";
    class CustomLabel extends Component {
  render() {
    return (
      <div>
        {/* Doesn't show this division (actually doesn't apply the style ...) */}
        <div
          style={{ Backgroundcolor: "red",wIDth: "10px",height: "10px" }}
        ></div>
        <span>{this.props.name}</span>

        <br />

        {/* Doesn't show the red bullet insIDe the text */}
        <Badge color="#f50" text={this.props.name} />
      </div>
    );
  }
}
    export default CustomLabel;

如何自定义 highcharts 中的数据标签？实际上我想使用自定义组件作为标签。

解决方法

    dataLabels: {
      enabled: true,formatter: function () {
        return renderToStaticMarkup(<CustomLabel name={this.point.name} />);
      }
    }

大佬总结

以上是大佬教程为你收集整理的如何在 Highcharts 中使用 react 组件作为标签？全部内容，希望文章能够帮你解决如何在 Highcharts 中使用 react 组件作为标签？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。