jqplot条形图和折线图后面的折线图

Question

当我制作条形图线条时，默认情况下该线条位于顶部。我有一个填充的折线图，我希望它在我的条形图后面。有没有办法做到这一点？

下面是我的代码，它看起来很冗长，但大多数只是其他选项。每月能量值都有一个条形图，折线图（y2轴）是累积能量。

<script type="text/javascript">
$(document).ready(function () {
var rendered = false;
    $("#@uniqueId")[0].RenderGraph = function RenderGraph() {
        if(!rendered)
        {
            rendered = true;
            var energyValues = @(serializer.Serialize(Model.YAxis.Select((saving, index) => new double[] { index + 1, saving })))
            var cumulativeValues = @(serializer.Serialize(Model.Y2Axis.Select((total, index) => new double[] { index + 1, total })))
            var xticks = @Html.Raw(serializer.Serialize(Model.XAxis.Select((month, index) => new object[] { index + 1, month })))

            var options = {
                series: [
                    {
                        // Bar graph options
                        renderer: $.jqplot.BarRenderer,
                        color: '#009ED6'
                    },
                    {
                        // Line graph options
                        yaxis: 'y2axis',
                        color: '#3399FF',
                        fillColor: '#59ACFF'
                    }
                ],
                seriesDefaults: {
                    rendererOptions: {
                        barWidth: 25,
                        highlightMouseOver: false,
                        smooth: true
                    },
                    showMarker: false,
                    fill: true,
                    fillAlpha: 0.5,
                    fillAndStroke: true
                },
                grid: {
                    drawBorder: false,
                    shadow: false,
                    background: 'White'
                },
                axes: {
                    xaxis: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                            angle: -90,
                            showGridline: false
                        },
                        ticks: xticks,
                        label: '@Model.XAxisLabel'
                    },
                    yaxis: {
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        labelOptions:
                        {
                            fontSize: '10pt'
                        },
                        label: '@Model.YAxisLabel'
                    },
                    y2axis: {
                        min: 0,
                        tickOptions: {
                            showGridline: false
                        },
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        labelOptions:
                        {
                            fontSize: '10pt'
                        },
                        label: '@Model.Y2AxisLabel'
                    }
                }
            }

            if(energyValues.length > 0)
            {
                $.jqplot("@uniqueId .barLineGraph", [energyValues, cumulativeValues], options);
            }
        }
    }
});
</script>

Answer 1

我解决了自己的问题，很简单，我不知道为什么我不这样做。系列组件的顺序很重要。我只是交换了线图和条形图系列（因为第二个将在第一个上面）并在绘图时交换energyValues和cumulativeValues。

由于某种原因，酒吧后来向右移动了一点。我刚刚在系列渲染器中添加了负面的barPaddingOptions，它现在看起来很完美。