Question

我正在尝试使用javascript创建一个饼图，允许用户点击切片并“查看构成该切片的内容”。如果您曾经使用过mint.com，您就会明白我的意思 - 假设您正在查看费用饼图并单击“汽车”切片，然后您会看到切片扩展为新的气体，维护，等

为了更进一步，我正在处理大量数据，因此当单击切片时能够获取（ajax）新数据也是一个有用的选项（尽管我可能会得到）离开没有它。）

也许“嵌套”，“多层次”和“向下钻取”不是正确的术语，因为我一整天都在搜索，似乎无法找到解决方案。

有人知道这个库吗？提前谢谢！

Answer 1

我使用HighCharts点击事件实现了类似的向下钻取系统。这是粗略的语法：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    series: [{
        data: myInitialDataArray, // make sure each data point has an id
        point: {
            events: {
                click: function () {
                    $.post('/get/data/by/id/' + this.id, function(data) {
                        // you may need to format your data here
                        chart.series[0].setData(data);
                    });
                }
            }
        }
    }]
});

在此示例中，您定义了一个click事件，该事件使用point的id值（this.id）来执行URL的Ajax发布。然后，您可以使用帖子中的数据重新绑定图表系列。

请注意，每次使用setData函数更新图表时，每个数据点都需要有一个id值才能继续下钻。

希望这有帮助！

Answer 2

尝试psd3饼图库
演示 - https://pshivale.github.io/psd3
来源 - https://github.com/pshivale/psd3
它支持多级饼图，圆环图和旭日形图。它还支持通过双击向下钻取饼图。

Javascript中的嵌套/多级/下钻饼图？

2 个答案: