div-highmapsのjson結果を円グラフにレンダリング

Question

this electoral mapを構築しましたが、マップ領域をクリックしたときにポップアップダイアログで2者の円グラフを描画できませんでした。ダイアログのタイトルは渡されますが、チャットを作成する実際の値は渡されません。

返されたjson data is hereが返され、誰かが地図上の郡をクリックしたときに、ダイアログボックスに円グラフをプッシュしたいだけです。ここに私のコードとdivにパイをレンダリングする "pointClick"関数があります。

$(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データには、あなたには、いくつかのフィドルを追加することができ、この

Fiddle link

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}%' 
     } 
    }]