Jquery float p ie: изменение способа отображения заголовка - PullRequest
Новая
       45

Jquery float p ie: изменение способа отображения заголовка

1 голос
/ 04 мая 2020

Мне нужно изменить способ отображения легенды с плавающей точкой p ie, мне нужно, чтобы она отображала метку: процент от графика. так и остаться

так это

код js

    (function( $ ) {

    'use strict';

    (function() {
        var plot = $.plot('#flotPie', flotPieData, {
            series: {
                pie: {

                    show: true,
                    combine: {
                        color: '#999',
                        threshold: 0.1
                    },

                }
            },
            legend: {
                show: true,

            },
            grid: {
                hoverable: true,
                clickable: true
            }
        });
    })();

}).apply( this, [ jQuery ]);

код HTML

<div class="chart chart-sm" id="flotPie">
                                                <script type="text/javascript">
                                                    var flotPieData = [{
                                                        label: "Otimo: ",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#0088cc'
                                                    }, {
                                                        label: "Bom:",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#2baab1'
                                                    }, {
                                                        label: "Regular:",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#734ba9'
                                                    }, {
                                                        label: "Ruim:",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#E36159'
                                                    }];
                                                </script>
                                                </div>

Я использую шаблон, где я передаю эту информацию, я думал о конкатенации метки + процент больше, как бы вы это сделали?

1 Ответ

0 голосов
/ 05 мая 2020

Чтобы отобразить процент на метке легенды,
, вам нужно будет рассчитать каждый процент
и соответственно изменить метку
перед построением диаграммы.

Сначала вычислите сумму. Это достигается за счет циклического набора данных и суммирования значения оси Y каждой строки серии. 

var total = 0;
$.each(flotPieData, function(indexSeries, series) {
  $.each(series.data, function(indexRow, row) {
    total += row[row.length - 1];
  });
});

далее, l oop, набор данных снова,
, вычисление процента,
и изменение метки. 

$.each(flotPieData, function(indexSeries, series) {
  var percent = 0;
  $.each(series.data, function(indexRow, row) {
    percent += row[row.length - 1];
  });
  flotPieData[indexSeries].label += ' ' + ((percent / total) * 100).toFixed(0) + '%';
});

см. Следующий рабочий фрагмент ... 

var flotPieData = [{
  label: "Otimo:",
  data: [
    [1, 1]
  ],
  color: '#0088cc'
}, {
  label: "Bom:",
  data: [
    [1, 1]
  ],
  color: '#2baab1'
}, {
  label: "Regular:",
  data: [
    [1, 1]
  ],
  color: '#734ba9'
}, {
  label: "Ruim:",
  data: [
    [1, 1]
  ],
  color: '#E36159'
}];

var total = 0;
$.each(flotPieData, function(indexSeries, series) {
  $.each(series.data, function(indexRow, row) {
    total += row[row.length - 1];
  });
});

$.each(flotPieData, function(indexSeries, series) {
  var percent = 0;
  $.each(series.data, function(indexRow, row) {
    percent += row[row.length - 1];
  });
  flotPieData[indexSeries].label += ' ' + ((percent / total) * 100).toFixed(0) + '%';
});

var plot = $.plot('#flotPie', flotPieData, {
  series: {
    pie: {
      show: true,
      combine: {
        color: '#999',
        threshold: 0.1
      },

    }
  },
  legend: {
    show: true,
  },
  grid: {
    hoverable: true,
    clickable: true
  }
});
.flot {
  left: 0px;
  top: 0px;
  width: 610px;
  height: 250px;
}

#flotTip {
  padding: 3px 5px;
  background-color: #000;
  z-index: 100;
  color: #fff;
  opacity: .80;
  filter: alpha(opacity=85);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

<div id="flotPie" class="flot"></div>
...