首页 文章

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

提问于
浏览 次
5

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

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

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

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

javascript charts highcharts pie-chart

2 回答

  • 2

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

    回复于
  • 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值才能继续进行深入分析 .

    希望这可以帮助！

    回复于

相关问题