Круговые диаграммы Jquery Flot показывают значение данных вместо процентов - PullRequest
Новая
       53

Круговые диаграммы Jquery Flot показывают значение данных вместо процентов

24 голосов
/ 15 апреля 2011

Я не могу понять, как получить flot.pie, чтобы изменить данные, показанные в метках, с процента от «сырых данных» на фактические данные. В моем примере я создал круговую диаграмму с количеством прочитанных / непрочитанных сообщений.

Количество прочитанных сообщений: 50. Количество непрочитанных сообщений: 150.

Созданный круговой график показывает процент прочитанных сообщений как 25%. На этом месте я хочу показать реальные 50 сообщений. Смотрите изображение ниже:

enter image description here

Код, который я использовал для создания пирога: 

var data = [
    { label: "Read", data: 50, color: '#614E43' },
    { label: "Unread", data: 150, color: '#F5912D' }
];

И 

    $(function () {
        $.plot($("#placeholder"), data,
           {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function (label, series) {
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                        },
                        threshold: 0.1
                    }
                }
            },
            legend: {
                show: false
            }
        });
    });

Возможно ли это?

С ответом @Ryley я пришел к грязному решению. Когда я выводил series.data, возвращались значения «1,150» и «1,50». Мне пришла в голову идея вычесть первые 2 символа возвращаемого значения и отобразить вычтенное значение. 

String(str).substring(2, str.lenght)

Это круговая диаграмма, которую я создал с помощью этого решения:

enter image description here

Это не лучшее решение, но оно работает для меня. если кто-то знает лучшее решение ....

Ответы [ 4 ]

44 голосов
/ 18 апреля 2011

Я нашел ответ на вопрос. Объект данных является многомерным массивом. Для получения актуальных данных используйте следующий код: 

    $(function () {
    $.plot($("#placeholder"), data,
       {
        series: {
            pie: {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2 / 3,
                    formatter: function (label, series) {
                        return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';

                    },
                    threshold: 0.1
                }
            }
        },
        legend: {
            show: false
        }
    });
});

Обратите внимание на код "series.data [0] [1]" для извлечения данных.

2 голосов
/ 15 апреля 2011

Это в некоторой степени зависит от того, что вы подразумеваете под «В этом месте я хочу показать реальные 50 сообщений».
Давайте предположим, что вы хотите иметь всплывающее окно div, когда они наводят курсор мыши на раздел «Чтение» или «Непрочитанное», и затем отображаете там сообщения.

Первый шаг - сделать вашу круговую диаграмму интерактивной. Вам нужно добавить опцию grid примерно так: 

legend: {
    show: true;
},
grid: {
    hoverable: true,
    clickable: true
}

Далее, вы должны привязать события click / hover к функциям, которые извлекают ваши сообщения и отображают их: 

$("#placeholder").bind('plothover',function(e,pos,obj){

});

$("#placeholder").bind('plotclick',function(e,pos,obj){
    if (obj.series.label == 'Read'){
       //show your read messages
    } else {
       //show your unread messages
    }       
});

Вот и все!

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

1 голос
/ 12 марта 2014

Вы можете использовать: 

formatter: function (label, series) {
    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>';
},
0 голосов
/ 15 апреля 2011

Попробуйте что-то вроде ProtoVis . Есть также несколько хороших ответов на SO со ссылками на другие бесплатные полезные библиотеки визуализации данных. Если у вас есть $ фьюжн-чарты, то тоже неплохо.

...