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

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参数轻松地将路径生成器修改为功能齐全的雷达图表。 此外，在此实现中，您会注意到变化很大的权重看起来很奇怪。 不过，我希望这会让你开始使用你的图表创意！

祝你好运。