如何创建加权金字塔图表（看起来像饼图）？

Question

我一直没能找到类似下面的金字塔图表的任何例子。我只以这个绘制的图像为例，但是我发现的大多数类似实现只是针对金字塔或常规的圆形饼图。

Answer 1

感谢您的评论。我看着它，在我看来，你可以很容易地使用路径生成器来获得类似的东西。

找到我这里执行： http://jsfiddle.net/chroth/5nx9Lpke/1/

我做了什么？

（1）创建一些简单的路径产生器（闭合路径）

function pathGen(d) { 
    return ('M 0 0 ' + 
    'L ' + rad * Math.sin(2 * pi * d[0]) + ' ' + rad * Math.cos(2 * pi * d[0]) + 
    'L ' + rad * Math.sin(2 * pi * d[1]) + ' ' + rad * Math.cos(2 * pi * d[1]) + 
    'Z'); 
} 

这基本上采取的形式[x,y]的数据点，并绘制的线段。

（2）接下来，我们添加转换权重的数据点的函数：

function dataGen(arr) { 
    var total = arr.reduce(function(a, b) { 
     return a + b 
    }); 
    var runner = 0; 
    var result = []; 
    for (var i = 0; i < arr.length; i++) { 
     result.push([runner, runner + arr[i]/total]); 
     runner += arr[i]/total; 
    } 
    return result; 

} 

（3）使用这些组件，我们可以只推入权重，并得到相应的曲线图中，像这样：

var data = dataGen([1, 1, 1, 1, 1]); 

（4）应用一些格式，交叉手指，运行它：

或使用其他权重一样[1, 2, 3, 3, 2, 2, 1, 2, 1, 2, 3, 2]：

注意 就个人而言，我是雷达图和类似的没有大风扇，因为它在很大程度上取决于权重的顺序。通过参数化rad参数，您可以轻松修改我的路径生成器，使其成为全功能的雷达图表。 另外，在这个实现中，你会注意到变化很多的权重看起来很奇怪。 不过，我希望这会让你开始使用图表创意！

祝你好运。