highchart 5角圖

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

#container
 min-width: 400px
 max-width: 600px
 height: 400px
 margin: 0 auto

const spiderData=[
    {
        tag: '住宅',
        value: 5
    },
    {
        tag: '醫療',
        value: 2
    },
    {
        tag: '食品安全',
        value: 5
    },
    {
        tag: '教育',
        value: 1
    },
    {
        tag: '\t',
        value: 0
    },
]

const maxValue=Math.max(...spiderData.map(el => el.value));

Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'line',
        margin: [40, 0, 0, 0],
    },

    credits: {
        enabled: false
    },

    title: {
        text: ''
    },

    pane: {
        size: '100%'
    },

    exporting: { 
        enabled: false 
    },

    xAxis: {
        categories: spiderData.map((el) => {
            if(el.value===maxValue){
                return `<div style="color: red">${el.tag}<div>`;
            }else{
                return el.tag;
            }
        }),
        tickmarkPlacement: 'on',
        lineWidth: 0,
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
        tickPositions: [0, 1, 2, 3, 4, 5],
        endOnTick: true,
    },

    tooltip: {
        enabled: false,
    },

    series: [{
        showInLegend: false,
        data: spiderData.map(el => el.value),
        pointPlacement: 'on',

    }]

});

CODEPEN