1

私はいくつかの販売データのプロットに取り組んでいます。このスクリーンショットのグラフをプロットする必要があります: 希望するグラフ.

私はこれを完了することができました： ここまでコンプリートできる

このための jquery コードは次のとおりです。

plot = $.jqplot('SalesChart2',
            [
                [[1,5]],
                [[1,10]],
                [[1,15]],
                [[1,20]],
                [[2,-25]],
                [[3,10]],
                [[4,10]],
                [[5, 6]]
            ]
            , {
                // Tell the plot to stack the bars.
                stackSeries: true,
                series: [
                                { label: 'Cash' },
                                { label: 'CreditCard' },
                                { label: 'DebitCard' },
                                { label: 'StoreCredit' },
                                { label: 'Discount' },
                                { label: 'AverageTransaction', xaxis: 'xaxis', yaxis: 'y2axis', disableStack: true },
                                { xaxis: 'xaxis', yaxis: 'y2axis', label: 'ItemsPerTransaction', disableStack: true },
                                { xaxis: 'xaxis', yaxis: 'y2axis', label: 'CustomerCount', disableStack: true }
                            ],
                animate: !$.jqplot.use_excanvas,
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        highlightMouseDown: true,
                        barWidth: 50
                    },
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: [1,2,3,4,5]
                    },
                    yaxis: {
                        min: -25,
                        tickOptions: {
                            formatString: "$%'d"
                        }
                    },
                    y2axis: {
                        autoscale: true,
                        min: 0
                    }
                },
                legend: {
                    show: true,
                    location: 'e',
                    placement: 'outside'
                },
                grid: {
                    drawGridlines: false
                }
            });

しかし、jqplot のドキュメントに何かが欠けているようです。

まず、y 軸に負の軸値がある場合、正の値も y 軸の最も負の点から開始します。

2 つ目は、最後のシリーズである「顧客数」が x 軸ではるかに先に実行されており、コンテナー DIV の幅制限を削除すると表示されます。

これで誰かが私を助けることができますか？

4

1 に答える 1

1

これを試して...

var plot = $.jqplot('SalesChart2',
        [
            [[1,5]],
            [[1,10]],
            [[1,15]],
            [[1,20]],
            [[2,-25]],
            [[3,10]],
            [[4,10]],
            [[5,6]]
        ]
        , {
            // Tell the plot to stack the bars.
            stackSeries: true,
            series: [
                            { label: 'Cash' },
                            { label: 'CreditCard' },
                            { label: 'DebitCard' },
                            { label: 'StoreCredit' },
                            { label: 'Discount'},
                            { label: 'AverageTransaction', xaxis: 'xaxis', yaxis: 'y2axis', disableStack: true},
                            { xaxis: 'xaxis', yaxis: 'y2axis', label: 'ItemsPerTransaction', disableStack: true},
                            { xaxis: 'xaxis', yaxis: 'y2axis', label: 'CustomerCount', disableStack: true }
                        ],
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {
                    highlightMouseDown: true,
                    barWidth: 50,
                    fillToZero: true
                },
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: [1,2,3,4,5,6,7,8],
                    showTicks: false
                },
                yaxis: {
                    min: -25,
                    tickOptions: {
                        formatString: "$%'d"
                    }
                },
                y2axis: {
                    autoscale: true,
                    min: 0
                }
            },
            legend: {
                show: true,
                location: 'e',
                placement: 'outside'
            },
            grid: {
                drawGridlines: false
            }
        });

http://jsfiddle.net/pabloker/jdmq7/

于 2013-01-30T13:37:11.233 に答える