Jquery 浮动饼图：更改标题的显示方式

Question

我需要更改浮动饼图例的显示方式，我需要它显示一个标签：图表的百分比。 so and to stay

so this

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>

我正在使用一个模板，我在其中传递这些信息，我想将标签 + 百分比连接起来，你会怎么做？

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>

Jquery 浮动饼图：更改标题的显示方式

Jquery float pie : changing the way the caption appears

html

css

jquery

charts

flot