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

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

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

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

введите здесь описание изображения

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

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 я пришел к грязному решению. Когда я вывожу серию.данные, были возвращены значения «1,150» и «1,50». Мне пришла в голову идея вычесть первые 2 символа возвращаемого значения и отобразить вычитаемое значение.

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

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

введите здесь описание изображения

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


jquery pie-chart flot
person Ruud van de Beeten    schedule 15.04.2011    source источник
comment
Я не могу заставить форматтер работать, отладчик даже не попадает в эту строку...   -  person Burak Karakuş    schedule 21.10.2014

Ответы (4)


arrow_upward
44
arrow_downward

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

    $(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] " для извлечения данных.

person Ruud van de Beeten    schedule 18.04.2011
comment
Это было для меня в то время. - person Ruud van de Beeten; 23.05.2013
comment
в моей диаграмме отображается только одна часть - person Adarsh M Pallickal; 06.01.2014

arrow_upward
2
arrow_downward

Это в некоторой степени зависит от того, что вы имеете в виду под фразой «В этом месте я хочу показать фактические 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
    }       
});

Вот и все!

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

person Ryley    schedule 15.04.2011
comment
Спасибо за Ваш ответ. Когда я вызываю следующий код 'alert(obj.series.data);' для данных с меткой «Чтение» вывод равен 1,50. Можете ли вы сказать мне, почему это не 50 вместо этого? - person Ruud van de Beeten; 18.04.2011
comment
@Ruud, flot манипулирует вашими данными в фоновом режиме ... и не очень понятно, что именно. Как вы поняли, он спрятан в массиве, а не легко доступен... - person Ryley; 18.04.2011

arrow_upward
1
arrow_downward

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

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>';
},
person Diogenes Chepe Ardines Salazar    schedule 12.03.2014

arrow_upward
0
arrow_downward

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

person FoneyOp    schedule 15.04.2011
comment
вы дезинформированы. Flot недавно выпустил новую версию. Что касается того, является ли это жестким / нерекомендованным, это ваше мнение. - person Ryley; 15.04.2011
comment
errrr, моя ошибка, я думал о filamentgroup.com/lab/ - person FoneyOp; 15.04.2011
comment
Flot все еще активно развивается, имеет очень активную группу/список рассылки Google и недавно создал зеркало на GitHub. Они теряют баллы за свою документацию, так как это текстовый файл, но любой, кто умеет читать, может его понять. - person Kai; 15.04.2011
comment
Спасибо, но я не могу изменить используемую библиотеку. - person Ruud van de Beeten; 18.04.2011