Визуализация результатов JSON на круговой диаграмме в div - highmaps

Question

Я построил эту избирательную карту, но мне не удалось нарисовать круговую диаграмму двух сторон во всплывающем диалоговом окне при щелчке по области карты. Передается заголовок диалога, но не фактические значения, которые должны создавать чат.

Возвращенные данные json находятся здесь, и я просто хочу вставить круговую диаграмму в диалоговое окно, когда кто-то нажимает на графство на карте. Вот мой код и функция "pointClick", которая должна отрисовывать круг в div.

$(function() {
  $.getJSON("<?= base_url('index.php/presidential/getByCounty'); ?>", function(json) {

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

      //THIS IS ACTUALLY WHAT'S NOT WORKING

      window.chart = new Highcharts.Chart({
        chart: {
          renderTo: $div[0],
          type: 'pie',
          width: 370,
          height: 240
        },
        title: {
          text: null
        },
        series: [{
          name: 'Votes',
          data: [{
            name: 'nasa',
            color: '#0200D0',
            y: this.nasa //returned json data for candidate 1 and I problem must be somewhere here
          }, {
            name: 'jubilee',
            color: '#C40401',
            y: this.jubilee //returned json data for candidate 2
          }],
          dataLabels: {
            //  format: '<b>{point.name}</b> {point.value:.1f}%'
          }
        }]
      });
    }
    //AM BUILDING THE ELECTORAL MAP FROM THIS POINT WHICH WORKS OUT NICELY

    $('#presidential').highcharts('Map', {
      title: {
        text: 'Presidential Electoral Map <em>(Kenya - Test)</em>'
      },
      legend: {
        title: {
          text: 'Plotical Parties'
        }
      },
      credits: {
        enabled: false
      },
      tooltip: {
        valueSuffix: ' Incumbent Margin'
      },
      mapNavigation: {
        enabled: true,
        enableButtons: false
      },

      colorAxis: {

        dataClasses: [{
          from: 0.0000001,
          to: 100,
          color: '#C40401',
          name: 'Jubilee'
        }, {
          from: -100,
          to: -0.00000001,
          color: '#0200D0',
          name: 'Nasa'
        }, {
          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": "Mandera",
            "path": "M572,-818,574,-789,578,-783,598,-775,619,-750,646,-738,645,-727,652,-703,662,-689,678,-679,689,-666,693,-672,696,-734,733,-774,783,-848,774,-845,765,-850,761,-846,711,-843,677,-873,663,-874,583,-838z"
          }, //and a couple more mapdata
        ]
      }, {
        "type": "mapline",
        "data": [{
          "name": "path5072",
          "path": "M443,-449Z"
        }]
      }]
    });
  });
});

Answer 1

Ваши данные JSON содержат число в строковом формате, поэтому конвертируйте его в Numberкак это

Скриптовая ссылка

   series: [{
      name: 'Votes',
      data: [{
        name: 'nasa',
        color: '#0200D0',
        y: Number(this.nasa) //transform to number
      }, {
        name: 'jubilee',
        color: '#C40401',
        y: Number(this.jubilee) //transform to number
      }],
      dataLabels: {
        format: '<b>{point.name}</b> {point.value:.1f}%'
      }
    }]