highchart 中的半圆形甜甜圈图，角部有数据标签

Question

如何使用提供这些结果的高图创建半圆形甜甜圈图：Result of graph expected

$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    title: {
      text: '3000',
      align: 'center',
      verticalAlign: 'middle',
      style: {
        fontSize: '50px'
      },
      y: 70
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          distance: 0
        },
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '75%']
      }
    },
    series: [{
      type: 'pie',
      name: '3000',
      innerSize: '65%',
      data: [{
        y: 3000,
        name: '0',
        color: '#00B8AA',
        dataLabels: {
          x: 1,
          y: 90,
        }
      }, {
        y: 6000,
        name: '6000',
        color: '#E9E9E9',
        dataLabels: {
          x: 0,
          y: 34
        }
      }]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

我做了一个例子，但没有在角落显示值，如下图所示： Result of example using highchart

Answer 1

如果你需要使用饼图，你可以做一些简单的数据格式化来达到你的目的。您可以在饼图系列的开头和结尾添加两个 y: 0 切片。

 data: [{
    y: 0,
    name: '0',
    dataLabels: {
      enabled: true,
    }
  }, {
    y: 3000,
    color: '#00B8AA',
  }, {
    y: 3000,
    color: '#ddd',
  }, {
    y: 0,
    name: '6000',
    dataLabels: {
      enabled: true,
    }
  }]

它如何工作的示例：http://jsfiddle.net/zodc87jx/1/

另一种选择是使用 solidgauge 类型的图表，它会让您有机会只使用您的单个值，而无需向您的系列添加任何 'empty' 数据。

在这里您可以看到它如何工作的示例：http://jsfiddle.net/g65vLnyr/

此致，

highchart 中的半圆形甜甜圈图，角部有数据标签

Semi circle donut chart in highchart with data labels in corners

highcharts

donut-chart