我想向饼图Highchart添加标签,以便标签显示类别和数量,如this example
 这是我的代码:



$('#ro-tier-1').highcharts({
  chart: {
    type: 'pie'
  },
  data: {
    googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
    startColumn: 0,
    endColumn: 1,
    startRow: 0,
    endRow: 3,
    googleSpreadsheetWorksheet: 16
  },
  plotOptions: {
    dataLabels: {
      enabled: true,
      format: '{y}',
    }
  },
  title: {
    text: 'Tier 1 Schools in 2012, 2013, or 2014 Expansion or Ceiling increase '
  },
  yAxis: {
    min: 0,
    max: 25,
    tickInterval: 5,
    title: {
      text: 'Amount of Schools'
    },
  },
  xAxis: {
    type: 'category',
    title: {
      text: 'Result'
    }
  },
});

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/data.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
  </script>
</head>

<body>

  <div id="ro-tier-1"></div>

</body>




我知道我的问题出在数据标签的格式中,但是API文档对此却很少。

最佳答案

您所需要做的就是将dataLabels放置在正确的plotOptions中并使用point

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      format: '{point.name}:{point.y}',
    }
  }
}


您可以在此处http://plnkr.co/edit/5VI6cAqVoIibhAJ8pYfP看到工作示例

更新

格式化也可以使用{y}格式:'{y}',但是如果您想通过点引用更高级的表达式,则必不可少

09-29 20:38
查看更多