Вложенная / многоуровневая / детализированная круговая диаграмма в Javascript?

Я пытаюсь создать круговую диаграмму с помощью javascript, которая позволит пользователям нажимать на фрагмент и «просматривать, что составляет этот фрагмент». Если вы когда-либо пользовались сайтом mint.com, то вы поймете, что я имею в виду - скажем, вы просматриваете круговую диаграмму расходов и щелкаете сегмент «Автомобиль», после чего вы видите, что сегмент расширяется до новой диаграммы «Газ, Техническое обслуживание», и Т. Д.

Чтобы сделать еще один шаг вперед, я имею дело с большим объемом данных, поэтому возможность извлекать (ajax) новые данные при нажатии на срез также была бы полезной опцией (хотя я, вероятно, могу обойтись без нее. ).

Возможно, «вложенный», «многоуровневый» и «углубленный» - не подходящие термины, потому что я искал весь день и, похоже, не нашел решения.

Кто-нибудь знает библиотеку для этого? Заранее спасибо!


javascript charts pie-chart highcharts
person Tobias Fünke    schedule 13.11.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я реализовал аналогичные системы детализации, используя событие щелчка точки 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);
                    });
                }
            }
        }
    }]
});

В этом примере вы определяете событие щелчка, которое использует значение идентификатора точки (this.id) для выполнения публикации Ajax по URL-адресу. Затем вы используете данные из своего сообщения, чтобы повторно привязать ряд диаграммы.

Обратите внимание, что каждый раз, когда вы используете функцию setData для обновления диаграммы, каждая точка данных должна иметь значение id для продолжения детализации.

Надеюсь это поможет!

person Jeremy    schedule 15.02.2013

arrow_upward
1
arrow_downward

Попробуйте библиотеку круговых диаграмм psd3
Демонстрация - https://pshivale.github.io/psd3
Источник - https://github.com/pshivale/psd3
Он поддерживает многоуровневый пирог. диаграммы, кольцевые диаграммы и диаграммы солнечных лучей. Он также поддерживает детализацию сектора пирога двойным щелчком по нему.

person Pramod Shivale    schedule 11.08.2015