Нужна помощь в построении диаграммы с использованием 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