процент всплывающей подсказки круговой диаграммы flot

#javascript #jquery #flot

Вопрос:

У меня возникла проблема с круговой диаграммой flot, во всплывающей подсказке не отображается правильное процентное значение, например, оно показывает series1:%p.0%

код js

   var data = [{
    label: "Series 0",
    data: 1
}, {
    label: "Series 1",
    data: 3
}, {
    label: "Series 2",
    data: 9
}, {
    label: "Series 3",
    data: 20
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
    series: {
        pie: {
            show: true
        }
    },
    grid: {
        hoverable: true
    },
    colors: ["#99c7ce","#efb3e6","#a48ad4","#AEC785","#fdd752"],
    tooltip: true,
    tooltipOpts: {
        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    }
});

Пожалуйста, помогите решить эту проблему.

Спасибо

1. Я создал JSFiddle с вашими данными и параметрами, и, похоже, это работает — например, при наведении курсора отображается всплывающая подсказка 9%, Series 1

2. @prmech да, правильно, этот код работает в jsfiddle, но не на моей странице.

3. Вам нужно будет отредактировать свой вопрос и добавить больше деталей кода. Какие библиотеки jQuery / flot вы используете, в каком порядке вы их включаете и т.д.

4. Используете ли вы последнюю версию Flot и плагина всплывающей подсказки?

Ответ №1:

Вам необходимо включить jquery.flot.tooltip.min.js и изменить несколько настроек в соответствии с приведенным ниже рабочим примером, чтобы отобразить всплывающую подсказку со значением.

 datapie = [
    {label: "Running",  data: 19.5, color: '#e1ab0b'},
    {label: "Stopped",  data: 4.5, color: '#fe0000'},
    {label: "Terminated",  data: 36.6, color: '#93b40f'}
];

function legendFormatter(label, series) {
    return '<div '   
           'style="font-size:8pt;text-align:center;padding:2px;">'  
           label   ' '   Math.round(series.percent) '%</div>';
};

$.plot($("#placeholder"), datapie, {
 
 series: {
     pie: {show: true, threshold: 0.1,
        // label: {show: true}
    }
    },
     grid: {
        hoverable: true
    },
    tooltip: true,
    tooltipOpts: {
        cssClass: "flotTip",
        content: "%p.0%, %s",
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    },
   
    
    legend: {show: true, labelFormatter: legendFormatter}
    
    });

 #flotTip {
    padding: 3px 5px;
    background-color: #000;
    z-index: 100;
    color: #fff;
    opacity: .80;
    filter: alpha(opacity=85);
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>

<div id="placeholder" style="width:500px;height:400px;"></div>

Ссылка на рабочий пример: http://jsfiddle.net/Rnusy/335 /

Ответ №2:

Вам нужен плагин всплывающей подсказки. Смотрите полный список доступных плагинов здесь: Плагины Flot