如何在条形图中显示每个月的盈利或亏损百分比？

Question

我有一个条形图，其中前三个系列代表费用，最后一个系列代表收入。我想以百分比显示每个月的盈利或亏损。下面是当前图表的图像。

这是我的代码。

var s1 = [27362, 45273, 77020, 42059, 23764, 12803];
    var s2 = [15920, 30220, 32800, 21900, 19500, 17300];
    var s3 = [4100, 1800, 7150, 3600, 2400, 2400];
    var s0 = [27208, 46371, 169374, 114879, 35692, 37669];
    var ticks = ['March', 'April', 'May', 'June', 'July', 'August'];

$.jqplot.config.enablePlugins = true;

var plot3 = $.jqplot('chart1', [s1, s2, s3, s0], {
    stackSeries: true,
    animate: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: {
            show: true,
            location: 'n',
        },
        rendererOptions: {
            fillToZero: true,
            barPadding: 0,
            barMargin: 0,
            barWidth: 55,
            barDirection: 'vertical',
        },
    },
    series: [
        {
            label: 'Equipment',
            color: '#c5b47f'
        },
        {
            label: 'Salaries',
            color: '#eaa228'
        },
        {
            label: 'O&M',
            color: '#4bb2c5'
        },
        {
            label: 'Revenue',
            color: '#579575',
            disableStack: true

        }
    ],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontSize: '13pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {
        }
    },
    legend: {
        show: true,
        location: 'e',
        placement: 'outside'
    }
});

我希望它显示如下所示的利润或亏损

我正试图通过三种不同的方法实现这一目标。

1）第一种方法是使用pointLabels。使用pointLabel，我必须使用'stackedValue:true'，它不会给出堆栈中系列的单独值。其次，pointLabel的位置在堆积条上方而不在组上方。

2）第二种方法是添加趋势线。但问题是y轴值是绝对数，趋势线的值是百分比。是否可以在同一图表中显示百分比系列？

2）第三种方法是计算每个月的利润或损失百分比，然后通过在每个月的图表中插入一个div来显示它。听起来很棘手但是可行吗？

欢迎任何不同的方法。