jqplot:缺少堆积条形图的元素 [英] jqplot: elements of stacked bar chart missing

问题描述

我已经在以下方面苦苦挣扎了.希望有人可以帮助我.

I've been struggeling with the following for quite some time now.. Hopefully someone can help me out.

我要做什么: 我正在尝试使用jqplot将水平堆叠的条形图与折线图结合起来.堆积的条形图应包含五个值.折线图应与堆积的条形图交叉.

What I'm trying to do: Using jqplot I'm trying to combine a horizontal stacked bar chart with a line chart. The stacked bar chart should contain five values. The line chart should cross the stacked bar chart.

到目前为止，我想出了什么: 我已经成功地构建了水平堆叠的条形图，并且该线横越了它.

What I've come up with so far: I've managed to build the horizontal stacked bar chart and the line crosses it as it should.

问题: 现在，我的堆积条形图显示了三个块(值:1、4和16).我应该看到五个块(值:1、2、4、8和16).

The problem: My stacked bar chart now shows three blocks (values: 1, 4 and 16). I should be seeing five blocks (values: 1, 2, 4, 8 and 16).

我使用的代码:

<script type="text/javascript">

    $(document).ready(function() {
        var x1 = [[1,1]];
        var x2 = [[2,1]];
        var x3 = [[4,1]];
        var x4 = [[8,1]];
        var x5 = [[16,1]];
        var x6 = [[1,0.5],[1,1.5]];

        var plot2 = $.jqplot('thema1chart', [x1, x2, x3, x4, x5, x6], {
            stackSeries: true,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {
                    barDirection: 'horizontal'
                },
                pointLabels: {
                    show: false,
                    stackedValue: true
                }
            },
            series: [{shadow: false, color:'#666666'},
            {shadow: false, color:'#FFFFFF'},{shadow: false, color:'#b4d2dd'},{shadow: false, color:'#FFFFFF'},{shadow: false, color:'#666666'},
                     { 
                     shadow: false,
                         disableStack : true,//otherwise it wil be added to values of previous series
                renderer: $.jqplot.LineRenderer,
                lineWidth: 2,
                label:'Benchmark',
                color:'#666666',
                showLine:false, 
                pointLabels: {
                    show: false
                },
                markerOptions: {
                    size: 7, style:"plus" 
                }}],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
                ,
                yaxis: {
                    autoscale: true
                }
            }
        });
    });
    </script>  

非常感谢您能提供的任何帮助！

Many thanks for any help you could offer!

推荐答案

您需要将CategoryAxisRenderer应用于yaxis(而不是xaxis):

You need to apply CategoryAxisRenderer to yaxis (not to xaxis ) :

yaxis: {
   renderer: $.jqplot.CategoryAxisRenderer
}

请参见此处的工作示例

如果要绑定xaxis，请在轴选项中添加xaxis:{min:0}

Edit : Add xaxis:{min:0} to axes options if you want to bound xaxis

这篇关于jqplot:缺少堆积条形图的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！