如何用JavaScript实现目标样式的图表？

目标图表样式：

我尝试用Chart.js甚至ApexCharts来制作该图表，但一直未能成功。最接近的样式是极坐标图表（Polar Chart），以下是我目前的实现效果：

我的代码如下：

<div class="my-4">
                <canvas id="myRadarChart"></canvas>
            </div>

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-labels-dv"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chartDataObj = @json($responseData['chartData']);

        const chartData = {
            labels: chartDataObj.labels,
            datasets: [{
                    label: 'Personal Data',
                    data: chartDataObj.personalData,
                    fill: true,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)', // Light pink fill
                    borderColor: 'rgb(255, 99, 132)', // Pink border
                    pointBackgroundColor: 'rgb(255, 99, 132)', // Pink points
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(255, 99, 132)'
                },
                {
                    label: 'Organisation Data',
                    data: chartDataObj.orgData,
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)', // Light blue fill
                    borderColor: 'rgb(54, 162, 235)', // Blue border
                    pointBackgroundColor: 'rgb(54, 162, 235)', // Blue points
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(54, 162, 235)'
                }
            ]
        };

        const options = {
            elements: {
                line: {
                    borderWidth: 5,
                    tension: 0.8, // Adjust this value for more or less curvature
                },
                point: {
                    radius: 10
                }
            },
            scales: {
                r: {
                    angleLines: {
                        display: false
                    },
                    suggestedMin: 40,
                    suggestedMax: 100,
                    ticks: {
                        backdropColor: 'transparent',
                        stepSize: 20
                    },
                    pointLabels: {
                        font: {
                            size: 15 // Reduced for a more professional look
                        },
                        color: '#666'
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.0)'
                    }
                }
            },
            plugins: {
                labels: {
                    render: 'label',
                    arc: true,
                    position: 'outside',
                    fontColor: '#666',
                    fontSize: 9,
                    outsidePadding: 4,
                    textMargin: 4,
                    fontStyle: 'normal',
                },
                legend: {
                    display: false, // Set to true for professional charts to identify datasets
                    position: 'top' // A common position for legends in professional reporting
                },
                filler: {
                    propagate: true
                },
                tooltip: {
                    usePointStyle: true, // Use point style for better readability
                    backgroundColor: 'rgba(0,0,0,0.8)' // Semi-transparent black for a sleek look
                }
            },
            maintainAspectRatio: true,
        };

        // Chart.register(ChartDataLabels);
        const config = {
            type: 'polarArea',
            data: chartData,
            options: options
        };


        const myRadarChart = new Chart(
            document.getElementById('myRadarChart'),
            config
        );
    });
</script>

我甚至需要借助插件才能实现标签弯曲效果，但当前实现仍与目标样式差距较大。请问是否有合适的图表库或插件可以帮助我实现该目标？

1. 基于Chart.js适配目标样式 #

你的目标图表属于环形雷达图（Hollow Radar Chart），可通过调整Chart.js配置+现有插件实现接近效果：

• 替换图表类型：将polarArea改为radar，polarArea是填充式环形图，radar更适合多数据集的折线填充场景
• 实现环形效果：在scales.r中固定min和max，关闭中心区域网格绘制：

  scales: {
    r: {
      min: 40,
      max: 100,
      angleLines: { display: false },
      grid: {
        drawBorder: true,
        drawOnChartArea: false, // 仅保留外层环形网格
        color: '#ddd'
      },
      pointLabels: {
        position: 'outside',
        font: { size: 16 }
      }
    }
  }
  

• 优化填充与线条：隐藏数据点，调整边框宽度和填充透明度：

  datasets: [{
    // ... 原有配置
    pointRadius: 0, // 隐藏数据点
    borderWidth: 3
  }]
  

• 弧形标签优化：保留chartjs-plugin-labels-dv插件，调整outsidePadding让标签更贴合环形外侧。

2. 更适配的图表库推荐 #

如果Chart.js自定义成本过高，可选择以下更成熟的方案：

• Highcharts：原生支持极坐标环形雷达配置，通过pane.innerSize设置环形大小，弧形标签、多层填充均为内置功能，配置文档完善。
• D3.js：具备完全自定义能力，可1:1复刻目标样式，但需要编写更多底层渲染代码，适合高度定制需求。
• AnyChart：提供现成的环形雷达图模板，内置样式配置选项，无需额外插件即可实现类似效果。

3. 选型核心参考点 #

目标图表的核心特征是多层环形填充+外侧弧形标签+无中心网格，选型时优先确认库是否支持：

• 极坐标下的内半径自定义
• 多数据集的分层填充控制
• 弧形文本标签的原生支持

内容的提问来源于stack exchange，提问作者VenoM