1

最初の 3 つのシリーズが費用を表し、最後のシリーズが収益を表す棒グラフがあります。毎月の損益をパーセンテージで表示したい。以下は、現在のグラフのイメージです。

ここに画像の説明を入力

これが私のコードです。

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'
    }
});

以下のように損益を表示させたい

ここに画像の説明を入力

私はこれを3つの異なるアプローチで達成しようとしています。

1) 最初のアプローチは、pointLabels を使用することです。pointLabel を使用する'stackedValue:true'と、スタック内のシリーズの個々の値が得られません。第 2 に、pointLabel の位置は積み上げ棒グラフの上であり、グループの上ではありません。

2) 2 番目のアプローチは、トレンドラインを追加することです。しかし問題は、y 軸の値が絶対数であり、傾向線の値がパーセンテージになることです。パーセンテージ系列を同じグラフに表示することは可能ですか?

2) 3 番目のアプローチは、各月の利益または損失の割合を計算し、各月のグラフに div を挿入して表示することです。トリッキーに聞こえますが、実現可能ですか?

あなたの側からの異なるアプローチは大歓迎です。

4

0 に答える 0