简体   繁体   English

JQPLOT堆积条形图数组输入问题

[英]JQPLOT Stacked Bar Chart array input issue

I am trying to plot a stacked bar chart and i am dynamically passing the data to the chart 我正在尝试绘制堆积的条形图,并且正在将数据动态传递到该图

When i pass the input 当我通过输入

[1, 0] [0, 1] [0, 0] [0, 1] ["2015-02-16", "2015-02-15"]

in the variables s1,s2,s3,s4,dateArr (code snippet below) 在变量s1,s2,s3,s4,dateArr中(下面的代码段)

i get the proper stacked bar chart plotted 我得到了正确的堆积条形图

在此处输入图片说明

But when the data passed to the stacked bar chart is as follows 但是当传递到堆积条形图的数据如下

[2] [1] [0] [0]  ["2015-02-16"]

only the second array is plotted ,the first is being ignored 仅绘制了第二个数组,第一个被忽略

在此处输入图片说明

Do notice however that the y axis starts from 2 ,i .e it recognizes the first array but the same is not being plotted 请注意,但是y轴从2开始,即它可以识别第一个数组,但未绘制相同的数组

here is the code i am using to plot the chart 这是我用来绘制图表的代码

//plot stacked bar chart function
        function plotStack(s1,s2,s3,s4,dateArr) {
            if(dateArr.length==0){
                s1=[0,0,0,0];
                s2=[0,0,0,0];
                s3=[0,0,0,0];
                s4=[0,0,0,0];
                dateArr.push("");
                dateArr.push("");
                dateArr.push("");
                dateArr.push("");
            }
            $('#graph_stacked').html(''); // redraw the stack

            var plotStack = $.jqplot('graph_stacked', [s1, s2, s3, s4], {
            // Tell the plot to stack the bars.
            stackSeries: true,
            captureRightClick: true,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {                        
                        barWidth: 40,shadow:true,   // Set a 30 pixel width for the bars.
                        shadowAngle: 90,
                        highlightMouseDown: true    // Highlight bars when mouse button pressed. Disables default highlighting on mouse over.
                },
                pointLabels: {
                    show: false
                }
            },
            grid: { background: 'transparent' },
            seriesColors:   ["#47759e", "#444444", "#777777", "#9b9b9b"],
            series:         [   {label: 'New'}, {label: 'In Progress'}, {label: 'Requesting Assistance'}, {label: 'Completed'}  ],
            axes: {
                xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: dateArr
                },
                yaxis: {
                    // Don't pad out the bottom of the data range.  By default,
                    // axes scaled as if data extended 10% above and below the
                    // actual range to prevent data points right on grid boundaries.
                    // Don't want to do that here.
                    padMin: 0
                }
            },

            legend: {
                renderer: $.jqplot.EnhancedLegendRenderer,
                show: true,
                placement: 'outside',
                rendererOptions: {
                    numberRows: 2,
                    numberColumns: 2
                },
                location: 's',
                    marginTop: '45px',
                    border: 'none'
                },
                highlighter: {
                    show:true,
                    tooltipLocation: 'n',
                    showMarker : false,
                    tooltipAxisX: 20, // exclusive to this version
                    tooltipAxisY: 20, // exclusive to this version
                    useAxesFormatters: false,
                    formatString:'%s, %P',
                }
            });

            newTask.length=0;
            inProgressTask.length=0;
            reqAssistTask.length=0;
            completedTask.length=0;
            date.length=0;
            stackArrAllNew.length=0;
            stackArrAllInProgress.length=0;
            stackArrAllReqAss.length=0;
            stackArrAllCompTask.length=0;
            stackDateAll.length=0;
        }

So what am i doing wrong? 那我在做什么错?

Thanks in advance 提前致谢

Ok the solution was i had to change 好的解决方案是我必须改变

axes: {
                xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: dateArr
                },
                yaxis: {
                    // Don't pad out the bottom of the data range.  By default,
                    // axes scaled as if data extended 10% above and below the
                    // actual range to prevent data points right on grid boundaries.
                    // Don't want to do that here.
                    padMin: 0
                }
            },

to

axes: {
                xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: dateArr
                }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM