5

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

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

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

有谁知道这个图书馆？提前致谢！

4

2 回答 2

2

我已经使用 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 值才能继续向下钻取。

希望这可以帮助！

于 2013-02-15T17:33:28.783 回答
1

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

于 2015-08-11T17:28:56.043 回答