Question

我遇到的问题是格式化程序。除了要在每个切片上显示的文本外，饼图呈现正常。我为格式化程序设置了2个单独的函数，但它似乎只使用了一个，具体取决于我放置代码片段的顺序。这就是我所拥有的：

<script type="text/javascript">
    $( document ).ready( function() {
        var d_pie = <?= json_encode( $plots ); ?>,
            d_pie2 = <?= json_encode( $requested_array ) ?>,
            pie1_formatter = function( label, series ) {
                return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;"><strong>' + label + '</strong><br/>' + series.data[0][1] + ' ' + ( series.data[0][1] == 1 ? 'vote' : 'votes' ) + '</div>';
            },
            pie2_formatter = function( label, series ) {
                return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;"><strong>' + label + '</strong><br/>' + series.data[0][1] + '%</div>';
            };

        $.plot( '#chart_pie', d_pie, $.extend( true, {}, Plugins.getFlotDefaults(), {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function( label, series ) {
                            return pie1_formatter( label, series );
                        },
                        threshold: 0.1
                    }
                }
            },
            grid: { hoverable: true },
            tooltip: true,
            tooltipOpts: {
                content: '%p.0%, %s',
                shifts: {
                    x: 0,
                    y: -20
                }
            }
        } ) );

        $.plot( '#chart_pie2', d_pie2, $.extend( true, {}, Plugins.getFlotDefaults(), {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function( label, series ) {
                            return pie2_formatter( label, series );
                        },
                        threshold: 0.1
                    }
                }
            },
            grid: { hoverable: true },
            tooltip: true,
            tooltipOpts: {
                content: '%p.0%, %s',
                shifts: {
                    x: 0,
                    y: -20
                }
            }
        } ) );
    } );
</script>

结果是两个饼图都将%放在值之后。对于第一个饼图，它显示投票数量和%符号，但第二个饼图显示正确的百分比值。有没有办法强制第一个饼图而不是vote/votes之后说出%？

Answer 1

这是一个非常古老的问题，但我会假设如果我更换它：

formatter: function( label, series ) {
    return pie2_formatter( label, series );
},

使用：

formatter: pie2_formatter,

它会起作用。为了不让这个仍然是一个悬而未决的问题，我回答并标记为答案。

如何使用自定义格式化程序向页面添加多个flot饼图？

1 个答案: