Имате нужда от помощ за начертаване на диаграма с помощта на jqplot - показване на отрицателни стойности

Работя върху начертаването на някои данни за продажбите. Трябва да начертая графиката на тази екранна снимка:Желана графика.

Успях да завърша толкова: Мога да завърша толкова

Кодът на 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.

Второ, последната серия - „Броят на клиентите“ върви далеч напред по оста x и се вижда, когато премахна ограниченията за ширина на контейнера DIV.

Може ли някой орган да ми помогне в това?


jquery jquery-ui jquery-plugins jqplot
person teenup    schedule 03.01.2013    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Опитайте тази...

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/

person Pablo Claus    schedule 30.01.2013
comment
Здравейте, имах същия проблем с отрицателни стойности и вашият отговор работи добре. Предлагам ви да посочите какво променихте в OP кода: добавих fillToZero: true вътре в rendererOptions за $.jqplot.BarRenderer - person Roimer; 01.08.2013