Question

我想在我的饼图Highchart中添加标签，以便标签显示this example中的类别和数量这是我的代码：

＆＃13;

$('#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'
    }
  },
});

＆＃13;

<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>

＆＃13;

＆＃13; 我知道我的问题是数据标签的格式，但API文档非常稀疏。

Answer 1

您只需将dataLabels放置在正确的plotOptions中并使用point

即可

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

您可以在此处查看工作示例https://gist.github.com/kontext-e/f68c6a1b90dd862afb5d

更新

格式化也可以使用{y} 格式：＆＃39; {y}＆＃39; ，但是如果您想通过点进行更高级的表达式参考是必不可少的

将dataLables添加到饼图Highchart

1 个答案: