ハイチャートはパイとスパイダーのウェブを結合します

Question

私はスパイダーウェブを上にして円グラフを作成しようとしています。 私はハイチャートでそれを行う方法がわかりません。

これは私が現在の解決策の問題

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

});