Jquery float pie：改变标题的显示方式。

Question

我需要改变浮动饼图例的显示方式，我需要它出现一个标签：图形的百分比。所以，要保持

如此

编码

    (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>

我用的是一个模板，在这里我传递这个信息，我想把标签+百分比连起来更你会怎么做？

Answer 1

为了在图例标签上显示百分比，你需要在绘制图表之前计算出每个百分比，并相应修改标签。

首先，计算总和，这是通过循环数据集，并对每个系列行的y轴值进行总计来实现的。

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 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>