向饼状高图添加数据表

Add dataLables to pie Highchart

本文关键字：添加 数据表 高图      更新时间：2023-09-26

我想在饼状高图中添加标签，以便标签显示类别和金额，如下例所示下面是我的代码:

$('#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文档是相当稀疏的。

您所需要的只是将数据标签放置在正确的plotOptions中并使用point

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

您可以在这里看到一个工作示例http://plnkr.co/edit/5VI6cAqVoIibhAJ8pYfP

更新

格式化也可以使用{y} format: '{y}'，但如果你想要更高级的表达式引用通过点是必要的

相关文章：