анимация круговой диаграммы с произвольными областями (с прогрессом) без вспышки - PullRequest
Новая
       12

анимация круговой диаграммы с произвольными областями (с прогрессом) без вспышки

0 голосов
/ 28 марта 2012

Я пытаюсь анимировать круговую диаграмму, это не указатель мыши, и часть круговой диаграммы выскакивает, поэтому, пожалуйста, будьте терпеливы с тем, что я сказал

информация: 1. там будет толькобыть две категории в круговой диаграмме, правильные или неправильные ответы, таким образом, отображаются только два цвета, очень просто.2. площадь каждой категории (правильная или неправильная) НЕ постоянна, ее можно менять постоянно, то есть иногда правильная может составлять 45%, а неправильная - 55%, в другом случае - 35% и 65%.поэтому я хочу, чтобы круговая диаграмма отображалась по часовой стрелке, сначала отображая правильный ответ, а затем неправильный, поэтому в качестве примера можно привести любую круговую диаграмму по этой ссылке http://www.fusioncharts.com/demos/gallery/#pie-and-doughnut (она настроена против часовой стрелки вссылка ...)

так, как я могу заархивировать это, используя только CSS / JQuery?если нет, используя HTML 5?все, что не требует вспышки, я думаю.Есть ли пример анимации с примером кода?

Опять же, это не перемещает кусок / часть круговой диаграммы ....

пожалуйста, смотрите ссылку как то, что я имел в виду..

1 Ответ

0 голосов
/ 28 марта 2012

Я пробовал несколько библиотек диаграмм Javascript, и есть одна, которая, с моей точки зрения, среди прочих: HighCharts

Среди других функций, вы можете создавать удивительные круговые диаграммы , которые будут делать то, что вы хотите.Есть много примеров того, как создавать эти диаграммы, и вот этот: Пример пирога HighCharts - это тот, на который вы хотите взглянуть в качестве отправной точки.

Highcharts isпостроить в чистом Javascript и, следовательно, не требует Flash вообще.Код будет выглядеть примерно так, как показано выше, но заметьте , что данные статически записаны в примере, поэтому в зависимости от того, где / как вы получаете данные, вам придется изменить это. 

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                plotBackgroundColor: null,

                plotBorderWidth: null,

                plotShadow: false

            },

            title: {

                text: 'Right or Wrong? That's the question'

            },

            tooltip: {

                formatter: function() {

                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';

                }

            },

            plotOptions: {

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: true,

                        color: '#000000',

                        connectorColor: '#000000',

                        formatter: function() {

                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';

                        }

                    }

                }

            },

            series: [{

                type: 'pie',

                name: 'Right/Wrong',

                data: [

                    ['Right',   45.0],

                    ['Wrong',       26.8],


                ]

            }]

        });

    });


});​
...