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 轴上最负的点开始。

其次，最后一个系列 - “客户数量”在 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 回答