jqplot并排堆积的条形图 [英] jqplot Side by Side Stacked Bar Chart

问题描述

是否可以使用jqplot实现并排堆积的条形图?例如，X轴将是给定的月份，每个月您将有一定数量的堆积条形图.

Is it possible to achieve a side by side stacked bar chart using jqplot? For example the X-Axis would be a given month and for each month you would have some number of stacked bars.

类似这样的东西:

注意:我要的是不同于普通堆叠图表的其他内容.请看图片以更好地了解我正在尝试做的事情.

NOTE: I'm asking for something different that just a normal stacked chart. Please look at the picture to get a better understanding of what I'm trying to do.

推荐答案

您将不得不在同一绘图基础上绘制两个图形，如果您不希望使用任何工具提示或其他东西，因为可以使用，可以这样做在只有一个地块上试试这个-

You will have to plot two graphs on same plot base which will be okay to do if you don't want any tool-tip or something because it will work on only one of the plot try this-

$(document).ready(function(){
    /* graph config */
    var maxVal = 13;

    /* graph vals */
    var Bar1 = [5, 0, 10, 0, 12, 0];
    var Bar2 = [0, 17, 0, 20, 0, 12 ];
    var BaseVals=[0,0,0,0,0,0];
    /* graph ticks */
    var baseTicks=['Americas','','Europe','','Asia','']
    var EmptyTicks=['','','','','','']


    /* plot the base graph */
    plotbase = $.jqplot('chart3', [BaseVals], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {barMargin: 10},
            pointLabels: {show: false}
        },
        axesDefaults: {show: false}, 
        tickOptions: {showMark: false, angle: 90}, 
        axes: {
            showLabel: false, 
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: baseTicks, 
                tickOptions: {markSize: 0}
            }, 
            yaxis: {
                padMin: 0, 
                min: 0,
                max: maxVal, 
                showLabel: false, 
                show: false
            }
        }
    }); 





    plot2 = $.jqplot('chart3', [Bar1], {
        seriesColors: ["#67ce64", "#da9831","#67ce64", "#da9831"],\\this can be changed 
        stackSeries: true,
        captureRightClick: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {barMargin: 10, highlightMouseOver: true},
            pointLabels: {show: false}
        },
        axesDefaults: {show: false}, 
        tickOptions: {showMark: false}, 
        axes: {
            showLabel: false, 
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: EmptyTicks
            },
            yaxis: {
                padMin: 0, 
                min: 0,
                max: maxVal, 
                showLabel: false, 
                show: false
            }
        },
        grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
    });


    plot1 = $.jqplot('chart3', [Bar2], {
        stackSeries: true,
        captureRightClick: true,
        seriesColors: ["#effa38", "#37d1f8", "#5129b6","#5129b6"],//this can be changed 
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {barMargin: 10, highlightMouseOver: true },
            pointLabels: {show: false}
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                tickRenderer:$.jqplot.CanvasAxisTickRenderer,
                ticks: EmptyTicks, 
                tickOptions: {
                    angle: -90, 
                }
            },
            yaxis: {
                padMin: 0, 
                min: 0,
                max: maxVal
            }
        }, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
    });

});

但是请注意，您将只能在其中一个图上应用工具提示/突出显示

But note this that you will be able to apply tool-tip/Highlighter on only one of the plot

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