highchart comb pie and spiderweb

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' 
}] 

});