将 json 结果呈现为 div 中的饼图 - highmaps

Question

我建了this electoral map，但点击地图区域时在pop-up对话框中绘制双方饼图没有成功。正在传递对话框标题，但未传递应构建聊天的实际值。

返回的 json data is here 而我只想在有人单击地图上的县时将 pie-chart 推送到对话框。这是我的代码和 "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 像这样

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

将 json 结果呈现为 div 中的饼图 - highmaps

Rendering json results to a pie chart in a div - highmaps

javascript

jquery

json

highcharts

highmaps