javascript - 如何在我的 highchart 饼图上显示计数值和百分比？

Question

var json=
[
    {
        "a": "OOCBER",
        "b": "OOCL BERLIN",
        "c": "CHINA",
        "d": "GREAT BRITAIN",
        "e": "*PI",
        "f": "NGB",
        "g": "CN",
        "i": "GB",
        "j": "9PIO5090196",
        "k": "2PI5090420",
        "l": "WL15802C/D",
        "m": "NB1500682",
        "n": 9,
        "o": 6,
        "p": "2015-09-14",
        "q": "2015-09-14",
        "s": 4,
        "u": "40HC",
        "v": "TLU7564566",
        "w": "CN074909",
        "x": "LEIGH",
        "y": "NINGBO",
        "z": 395,
        "B": 68,
        "C": 7987.5,
        "D": "534",
        "E": "Chunghy",
        "F": "07405",
        "G": "PIF",
        "H": "FB",
        "I": "NIGBO",
        "J": "NGB",
        "K": "2015-09-12",
        "L": "2015-09-29T10:05",
        "M": "2015-09-29T10:05",
        "Y": "SOUTHAMPTON",
        "zp": "SOU",
        "N": "2015-10-21",
        "O": "2015-09-22T17:40",
        "P": "2015-09-22T17:40",
        "Q": "2015-10-21T12:54",
        "R": "2015-10-22T14:13",
        "S": "2015-10-27T10:30",
        "T": "2015-10-27T10:30",
        "U": "2015-10-27T10:30",
        "V": true,

    }, etc......

我希望在饼图上显示实际计数以及百分比。目前它只显示％，但我希望实际计数显示在它旁边。在我的代码片段中查找 *** 此处的实际计数值 ***。我尝试了 point.y 但这并没有给我正确的值。请帮忙。

$(function() {
  var ContainerCounts = {};
  var ContainerTypes = [];
  var totalCount = 0;

  //loop through the object
  $.each(json, function(key, val) {
    //get the container name
    var ContainerType = val["u"];

    //build array of unique container names
    if ($.inArray(ContainerType, ContainerTypes) == -1) {
      ContainerTypes.push(ContainerType);
    }

    //add or increment a count for the container name
    if (typeof ContainerCounts[ContainerType] == 'undefined') {
      ContainerCounts[ContainerType] = 1;
    } else {
      ContainerCounts[ContainerType] ++;
    }

    //increment the total count so we can calculate %
    totalCount++;
  });

  //console.log(ContainerTypes);

  var data = [];
  //loop through unique countries to build data for chart
  $.each(ContainerTypes, function(key, ContainerType) {
    data.push({
      name: ContainerType,
      y: Math.round((ContainerCounts[ContainerType] / totalCount) * 100)
    });
  });
  //console.log(data);

  function popchart_shipment_breakout() {
    $('#container_shipment_breakout').highcharts({
      chart: {
        type: 'pie',
        options3d: {
          enabled: false,
          alpha: 45,
          beta: 0
        }
      },
      title: {
        text: 'Break out of shipments'
      },
      tooltip: {
        pointFormat: '*** Actual count here value *** <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          innerSize: 150,

          dataLabels: {
            enabled: true
          }
        }
      },
    });
    chart = $('#container_shipment_breakout').highcharts();
    chart.addSeries({
      data: data
    });
  }

  popchart_shipment_breakout();
});

Answer 1

只需使用 this.y 而不是 point.percentage

或者

使用下面的代码来设置工具提示的格式。

tooltip: {
        formatter: function () {
            return '</b>' + this.y + '</b>';
        }
    }