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

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

在此示例中，您定义一个单击事件，该事件使用点的 id 值 (this.id) 对 URL 执行 Ajax 发布。然后，您可以使用帖子中的数据重新绑定图表系列。

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

希望这可以帮助！