下面是该项目的完整链接：Electoral Map我有一个HighchartMap，我试图将其转换为React，但无法完全理解。我尝试使用React说唱歌手，但没有成功。
我有什么：
JSON数据-将从一个API中获取，但我已经将它们硬编码如下。Jquery函数Map数据。几个highcharts导入。
我还没有包括路径数据，太长了它不会张贴。

$(function() {
      var json = [{
        "name": "Busia",
        "registered": "251305",
        "UDA": "0",
        "Azimio": "0",
        "value": "-5"
      },{
        "name": "Wajir",
        "registered": "118091",
        "UDA": "8",
        "Azimio": "7",
        "value": "-2"
      }]

      function init() {

        function pointClick(json) {
          var row = this.options.row,
            $div = $('<div></div>')
            .dialog({
              title: ([this.name]),
              width: 400,
              height: 300
            });

          window.chart = new Highcharts.Chart({
            chart: {
              renderTo: $div[0],
              type: 'pie',
              width: 370,
              height: 240
            },
            title: {
              text: null
            },
            series: [{
              name: 'Votes',
              data: [{
                name: 'Azimio',
                color: '#0200D0',
                y: Number(this.Azimio)
              }, {
                name: 'UDA',
                color: '#C40401',
                y: Number(this.UDA)
              }],
              dataLabels: {
                format: '<b>{point.name}</b> {point.value:.1f}%'
              }
            }]
          });
        }

        // Initiate the chart
        $('#presidential').highcharts('Map', {
          title: {
            text: 'Presidential Electoral Map <em>(Kenya)</em>'
          },
          legend: {
            title: {
              text: 'Political Affiliation' 
            }
          },
          credits: {
            enabled: false
          },
          tooltip: {
            valueSuffix: 'Margin'
          },
          mapNavigation: {
            enabled: true,
            enableButtons: false
          },

          colorAxis: {

            dataClasses: [{
              from: 0.0000001,
              to: 100,
              color: '#C40401',
              name: 'UDA'
            }, {
              from: -100,
              to: -0.00000001,
              color: '#0200D0',
              name: 'Azimio'
            }, {
              from: 0,
              to: 0,
              color: '#C0C0C0',
              name: 'Battle Ground(s)'
            }]
          },
          series: [{
            name: 'By County Difference',
            point: {
              events: {
                click: pointClick
              }
            },
            "type": "map",
            "joinBy": ['name', 'name'],
            "data": $.each(json, function() {}),
            "mapData": [{
              "name": "Busia",
              "path": "M40,-534,43,-533,46,-532L46,-530L44,-528,44,-525C44,-525,41,-520,41,-520L40,-516,40,-513,41,-511C41,-511,44,-512,43,-509,43,-506,44,-504,44,-504L38,-499,38,-497,44,-495,45,-493,41,-489,41,-486L36,-486L34,-487,30,-488,28,-487,25,-484,22,-484,20,-486,18,-483,16,-481,15,-478,14,-476L14,-473L15,-471,14,-469L12,-469L10,-467,9,-464,10,-459C10,-459,9,-458,7,-457,5,-456,5,-455,5,-455L3,-459,0,-462,0,-465,2,-470,2,-474L2,-478L5,-481,8,-486,10,-491,13,-493L13,-495L12,-499,13,-503,15,-506,15,-510,16,-513C16,-513,19,-516,20,-517,21,-517,24,-519,24,-519L27,-519,28,-519,31,-520L31,-524L32,-526,33,-527,34,-531,35,-532z"
            },
            }]
          }, {
            "type": "mapline",
            "data": [{
              "name": "path5072",
              "path": "M443,-449Z"
            }]
          }]
        });
      }
      init()
    });