如何创建圆形图表

Question

在此输入图像描述 我有这个参考图像，我想在我的项目中创建，但我找不到任何与此类似的东西，我发现的最接近的图像是 highchart 和 d3 图表。 我的 highchart 有一个名为 sunbrust 图表的图表 https://www.highcharts.com/demo/highcharts/sunburst 和 d3 https://observablehq.com/@d3/zoomable-sunburst

我认为第二个孩子正在使用极地面积图，但我无法将其结合起来

你能帮我创建这个复杂的图表吗？ 预先感谢..

Answer 1

您可以通过在 Highcharts 中使用具有多个窗格的极坐标图类型来创建此类图表。旋转标签需要一些自定义，但其他一切似乎都可以通过 Highcharts API 实现。

  pane: [{
    innerSize: '30%',
    size: '100%'
  }, {
    innerSize: '0%',
    size: '30%'
  }],
  yAxis: [{
    max: 10,
    pane: 0
  }, {
    pane: 1,
    max: 10
  }]

---

现场演示：https://jsfiddle.net/BlackLabel/ucj6n34L/

文档： https://www.highcharts.com/docs/chart-and-series-types/polar-chart

Answer 2

Highcharts.chart('container', {
    chart: {
      polar: true,
      height: 600,
      events: {
        render: function() {
          this.xAxis.forEach(xAxis => {
            const ticks = xAxis.ticks;
            const length = xAxis.categories.length;
            let rotation = 360 / length / 2;

            xAxis.tickPositions.forEach(tickPosition => {
              ticks[tickPosition].label.attr({
                rotation: rotation
              });

              rotation += 360 / length;
            });
          });
        }
      }
    },
    plotOptions: {
      series: {
        groupPadding: 0,
        pointPadding: 0
      }
    },
    series: [{
      type: 'column',
      data: [
        { y: 58, color: "rgba(84, 210, 53, 0.6)" },
        { y: 75, color: "rgba(84, 210, 53, 0.6)" },
        { y: 62, color: "rgba(30, 152, 73, 0.6)" },
        { y: 49, color: "rgba(30, 152, 73, 0.6)" },
        { y: 35, color: "rgba(53, 210, 108, 0.6)" },
        { y: 62, color: "rgba(53, 210, 108, 0.6)" },
        { y: 80, color: "rgba(255, 41, 0, 0.6)" },
        { y: 60, color: "rgba(255, 41, 0, 0.6)" },
        { y: 71, color: "rgba(255, 41, 0, 0.6)" },
        { y: 69, color: "rgba(255, 41, 0, 0.6)" },
        { y: 82, color: "rgba(255, 41, 0, 0.6)" },
        { y: 53, color: "rgba(154, 1, 0, 0.6)" },
        { y: 70, color: "rgba(154, 1, 0, 0.6)" },
        { y: 52, color: "rgba(154, 1, 0, 0.6)" },
        { y: 78, color: "rgba(154, 1, 0, 0.6)" },
        { y: 45, color: "rgba(221, 0, 0, 0.6)" },
        { y: 51, color: "rgba(221, 0, 0, 0.6)" },
        { y: 63, color: "rgba(221, 0, 0, 0.6)" },
        { y: 29, color: "rgba(221, 0, 0, 0.6)" },
        { y: 50, color: "rgba(221, 0, 0, 0.6)" }
      ]
    }, {
      type: 'column',
      xAxis: 1,
      yAxis: 1,
      data: [5, 5, 5, 5, 5, 5]
    }],
    legend: {
      enabled: false
    },
    pane: [{
      innerSize: '30%',
      size: '100%'
    }, {
      innerSize: '10%',
      size: '30%'
    }],
    yAxis: [{
      max: 100,
      min: 0,               // Set min value to 0
      tickInterval: 10,      // Force interval of 10
      tickAmount: 11,        // Set the total number of ticks (0 to 100 with interval 10)
      pane: 0
    }, {
      pane: 1,
      max: 100,
      min: 0,               // Set min value to 0
      tickInterval: 10,      // Force interval of 10
      tickAmount: 11         // Set the total number of ticks
    }],
    xAxis: [{
      categories: ["Inspire a Vision", "Lead From Values", "20% Accountability", "Engage the Heart",
            "Cultivate Curiosity", "Empower Others", "Reactive", "Indecisive", "Defensive",
            "Conservative", "Distant", "Perfectionist", "Critical", "Objectifier", "Forceful",
            "Self-Promoter", "Enabler", "Pleaser", "Passive", "Test"],
      labels: {
        align: 'center',
        distance: -13,
        style: {
          fontSize: 11
        }
      }
    }, {
      pane: 1,
      categories: ['ALIGN', 'ACHIEVE', 'GROW', 'PROTECTIVE', 'DEMANDING', 'APPROVAL'],
      labels: {
        distance: -18,
        align: 'center',
        style: {
          fontSize: 9
        }
      }
    }]
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>