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类型的图表，它会让您有机会只使用您的单个值，而不会在系列中添加任何“空”数据。

在这里，您可以看到一个示例：http://jsfiddle.net/g65vLnyr/

致以最诚挚的问候，

在highchart的半圈多福饼图与在角落的数据标签

1 个答案: