Question

我需要你的帮助，我的团队负责人给了我这张图表来绘制 enter image description here

来做到这一点

Answer 1

如评论中所述，您需要一种饼图类型，其中innerSize略小于该尺寸。这将产生薄的“楔形”。

size: '60%',
innerSize: '50%',

对于标签，启用带有softConnector: false的dataLabels将使您最接近该外观。

dataLabels: {
    enabled: true,
    softConnector: false
}

最后，对于图像使用Renderer.image并将图像放在dataLabels坐标处。

    function(chart){
        var middleX = chart.plotWidth / 2;
        var series = chart.series[0];
        var points = series.points;
        // image for each data label
        for (var i = 0; i < points.length; i++){
            var dataLabel = points[i].dataLabel;
            var posX = dataLabel.x > middleX ? dataLabel.x + 30 : dataLabel.x - 60; chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', posX, dataLabel.y, 50, 50)
        .add(); 
        }
        // middle image
        chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', series.center[0] - 25, series.center[1] - 25, 60, 60)
        .add();

    });

这是fiddle这一切。

Answer 2

JsFiddle

这个例子对你非常有用。试试这个

Html

  <div id="container" style="height: 400px; width: 500px"></div>

JS

  $(function() {
   var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie'
  },
  credits: {
            enabled: false
        },
        exporting: { 
            enabled: false
         },
  title: {
    text: 'MOBILIZATION SOURCE',
  },
  colors: ['#1b3264', '#5bc7ff', '#5b8eff', '#135af4'],
  plotOptions: {
    pie: {
      borderColor: '#000000',
      innerSize: '70%',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  series: [{
    name: 'Source',
    data: [
      ['Pysical visit', 59],
      ['Call centre', 31],
      ['Mela', 9],
      ['Self', 2]
    ]
  }]
},
// using 

function(chart) { // on complete

  var xpos = '50%';
  var ypos = '53%';
  var circleradius = 102;

  // Render the circl
  // Render the text 
  chart.renderer.text('<span style="color: black">Total</span>', 225, 225).css({
    width: circleradius * 2,
    color: '#red',
    fontSize: '16px',
    textAlign: 'center'
  }).attr({
    // why doesn't zIndex get the text in front of the chart?
    zIndex: 999
  }).add();
});
});

如何使用highcharts创建圆环图？

2 个答案: