highchart kombinieren Kuchen und Spinnennetz

Question

Ich versuche, ein Kreisdiagramm mit einem Spinnennetz oben zu erstellen. Ich bin nicht sicher, wie es mit Highchart geht.

Das ist, was ich mit der Verwendung von highchart

Das Problem mit der aktuellen Lösung, um am Ende möchte sind die Spinnweben Linien, die nicht in ihrem „Scheibe“ platzieren.

Dies ist, was ich bisher habe: 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>

Ich hoffe, dass jemand mich in die richtige Richtung zeigen kann. Ich habe versucht, ein Standard-Kreisdiagramm und fügen Sie einfach die Zeilen oben, aber die Zeilen werden nicht als Spinnennetz gerendert, es sei denn, es ist in einem Polardiagramm.

Answer 1

Sie müssten Waagen zwischen dem Kuchen und dem Polardiagramm übersetzen. Ich denke, dass es viel sinnvoller ist, nur ein Polardiagramm und seine Skala zu verwenden - mit den Hinzufügungen axis.plotBands und axis.plotLines.

Siehe die live example - Code und einige und Schritte sind unten.

Sie Daten:

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

Erstellen Plot Bands und Handlungsstränge:

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 
    } 
}); 

Positionierung Daten, die Sie in der Mitte der polaren Scheibe

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] 
}); 

Erstellen von Etiketten sein, die Scheiben:

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

Diagramm config:

$('#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' 
}] 

});