highchart 结合了饼图和蜘蛛网

Question

我正在尝试创建一个顶部带有蜘蛛网的饼图。 我不知道如何用 highchart 做到这一点。

这就是我最终想要使用 highchart 的结果

当前解决方案的问题是蜘蛛网线没有放在它们的“切片”内。

这是我到目前为止得到的： https://jsfiddle.net/bormeth/bk7c3bgs/

$(function() {
  $('#container').highcharts({
    chart: {
      polar: true
    },

    title: {
      text: 'Pie / Spiderweb',
      x: -50
    },

    xAxis: {
      visible: false
    },

    yAxis: [{
      min: 0,
      max: 100,
      visible: false
    }],

    tooltip: {
      shared: true
    },

    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 70,
      layout: 'vertical'
    },

    series: [{
      size: '100%',
      type: 'pie',
      name: 'Team',
      data: [{
        y: 21,
        color: '#9e0624',
        name: 'Manager'
      }, {
        y: 17,
        color: '#d14b21',
        name: 'Entrepreneur'
      }, {
        y: 9,
        color: '#ce8815',
        name: 'Innovator - Creator'
      }, {
        y: 23,
        color: '#648964',
        name: 'Supportive'
      }, {
        y: 18,
        color: '#011d4b',
        name: 'Organiser'
      }, {
        y: 12,
        color: '#43044e',
        name: 'Analyst'
      }]
    }, {
      type: 'line',
      data: [20, 2, 13, 30, 14, 22],
      color: 'green',
      name: 'User'
    }]

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

我希望有人能指出我正确的方向。 我尝试使用标准饼图并在顶部添加线条，但线条不会呈现为蜘蛛网，除非它位于极坐标图内。

Answer 1

您需要在饼图和极坐标图之间转换比例。我认为仅使用极坐标图及其比例更有意义 - 添加 axis.plotBands 和 axis.plotLines。

查看live example - 代码和一些步骤如下。

你的数据：

  var data = [20, 2, 13, 30, 14, 22];
  var dataLen = data.length;
  var pieData = [{
    y: 21,
    color: '#9e0624',
    name: 'Manager'
  }, {
    y: 17,
    color: '#d14b21',
    name: 'Entrepreneur'
  }, {
    y: 9,
    color: '#ce8815',
    name: 'Innovator - Creator'
  }, {
    y: 23,
    color: '#648964',
    name: 'Supportive'
  }, {
    y: 18,
    color: '#011d4b',
    name: 'Organiser'
  }, {
    y: 12,
    color: '#43044e',
    name: 'Analyst'
  }];

创建绘图带和绘图线：

var plotBands = pieData.slice(1).reduce((plotBands, point, i) => {
  var prevY = plotBands[i].to;

  plotBands.push({
    from: prevY,
    to: prevY + point.y / 100 * dataLen,
    color: point.color,
    innerRadius: '0%'
  });

  return plotBands;
}, [{
  from: 0,
  to: pieData[0].y / 100 * dataLen,
  color: pieData[0].color,
  name: pieData[0].name,
  innerRadius: '0%'
}]);

var plotLines = plotBands.map(plotBand => {
  return {
    value: plotBand.from,
    color: 'white',
    width: 1.5,
    zIndex: 6
  }
});

将您的数据定位在极片的​​中间

 var positionedData = data.map((value, i) => {
  var x1 = plotLines[i].value,
  x2 = i + 1 === dataLen ? dataLen : plotLines[i + 1].value,
  d = Math.sqrt(Math.pow(x1 - x2, 2));

  return [Number((x1 + d / 2).toFixed(2)), value, pieData[i].name, pieData[i].y]
});

为切片创建标签：

var labels = {};
  pieData.forEach((p, i) => {
  labels[positionedData[i][0]] = p.name
});

图表配置：

  $('#container').highcharts({
chart: {
  polar: true
},

xAxis: {
  plotBands: plotBands,
  plotLines: plotLines,
  gridLineWidth: 0,
  min: 0,
  max: dataLen,
  labels: {
    formatter: function() {
      return labels[this.value];
    }
  },
  tickPositions: positionedData.map(p => p[0]),
  showLastLabel: true
},

yAxis: [{
  min: 0,
  max: Math.max.apply(null, data),
  visible: false,
  endOnTick: false
}],

tooltip: {
  formatter: function() {
    var headerF = '<span style="font-size: 10px">' + this.key + ': ' + this.point.pieY + '</span><br/>';
    var pointF = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';

    return headerF + pointF;
  }
},

series: [{
  keys: ['x', 'y', 'name', 'pieY'],
  data: positionedData,
  color: 'green',
  name: 'User'
}]

});