1

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

在此处输入图像描述

这是我的代码。

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 来显示它。听起来很棘手，但可行吗？

欢迎您采取任何不同的方法。

4

0 回答 0