jqplot 3条形图填充?

时间:2018-08-27 21:05:52

标签: javascript bar-chart jqplot

我有一个3barchart带有2个折线图,问题是当y放置barPadding(或barMargin)时没有变化。 如何在图表之间添加一些填充物?

var grafCump = $.jqplot("home-contenedor-grafico", [sCumplimiento, sMarca, sGenesis, sNecesario, sRequerido], {
    title: 'Programado vs Necesario',
    animate: true,
    animateReplot: true,
    seriesColors: ['#604A7B', '#599241', '#FFC000', '#C00000', '#558ED5'], 
    cursor: {
        show: true,
        zoom: true,
        looseZoom: true,
        showTooltip: true,
        constrainOutsideZoom: true
    },
    legend: {
        show: true,
        placement: 'inside',
        renderer: $.jqplot.EnhancedLegendRenderer,
        renderOptions:{
            seriesToggle: true
        }
    },
    series: [
        {
            pointLabels: {
                show: true
            },
            label: 'Programado',
            renderer: $.jqplot.BarRenderer,
            showHighlight: true,
            yaxis: 'yaxis',
            rendererOptions: { 
                animation: {
                    speed: 2500
                },
                barWidth: 2,
                barPadding: 0,
                barMargin: 0,
                highlightMouseOver: true
            }
        },
        {
            pointLabels: {
                show: true
            },
            label: 'Marcas',
            renderer: $.jqplot.BarRenderer,
            showHighlight: true,
            yaxis: 'yaxis',
            xaxis: 'xaxis',
            rendererOptions: { 
                animation: {
                    speed: 2500
                },
                barWidth: 2,
                barPadding: 0,
                barMargin: 0,
                highlightMouseOver: true
            }
        },
        {
            pointLabels: {
                show: true
            },
            label: 'Login',
            renderer: $.jqplot.BarRenderer,
            showHighlight: true,
            yaxis: 'yaxis',
            xaxis: 'x2axis',
            rendererOptions: { 
                animation: {
                    speed: 2500
                },
                barWidth: 2,
                barPadding: 0,
                barMargin: 0,
                highlightMouseOver: true
            }
        },
        {
            label: 'Necesario',
            lineWidth: 1,
            yaxis: 'yaxis',
            markerOptions: {
                size: 3
            },
            rendererOptions: {
                animation: {
                    speed: 2000
                }
            }
        },
        {

            label: 'Requerido',
            lineWidth: 1,
            yaxis: 'yaxis',
            markerOptions: {
                size: 3
            },
            rendererOptions: {
                animation: {
                    speed: 2000
                }
            }
        }
    ],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        pad: 0
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticksNecesario,
            numberTicks: 6,
            tickOptions: {
                formatter: $.jqplot.DateTickFormatter,
                formatString: '%Y-%m-%d',
                labelPosition: 'right'
            },
            drawMajorGridlines: false,
            drawMinorGridlines: true,
            drawMajorTickMarks: false,
            rendererOptions: {
                tickInset: 0.5,
                minorTicks: 1
            }
        },
        x2axis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticksMarca,
            showTicks: false,
            numberTicks: 6,
            tickOptions: {
                formatter: $.jqplot.DateTickFormatter,
                formatString: '%Y-%m-%d',
                labelPosition: 'right'
            },
            drawMajorGridlines: false,
            drawMinorGridlines: true,
            drawMajorTickMarks: false,
            rendererOptions: {
                tickInset: 0.5,
                minorTicks: 1
            }
        },
        yaxis: {
            tickOptions: {
                formatString: "%'d"
            },
            rendererOptions: {
                forceTickAt0: true
            }
        },
        y2axis: {
            tickOptions: {
                formatString: "%'d"
            },
            rendererOptions: {
                alignTicks: true,
                forceTickAt0: true
            }
        }
    },
    highlighter: {
        tooltipContentEditor: function (str, seriesIndex, pointIndex) {
            return ('<table><tr><td>Datos</td><td></td></tr> \ <tr><td>Fecha:</td><td>' + sFechaN[pointIndex] + '</td></tr> \ <tr><td>Hora Franja:</td><td>' + sHoraFranjaN[pointIndex] + '</td></tr> \ <tr><td>Necesario:</td><td>' + Math.trunc(sNecesario[pointIndex]) + '</td></tr> \ <tr><td>Requerido:</td><td>' + Math.trunc(sRequerido[pointIndex]) + '</td></tr> \ <tr><td>Programado:</td><td>' + Math.trunc(sCumplimiento[pointIndex]) + '</td></tr> \ <tr><td>Marcas:</td><td>' + Math.trunc(sMarca[pointIndex]) + '</td></tr> \ <tr><td>Login:</td><td>' + Math.trunc(sGenesis[pointIndex]) + '</td></tr></table>'); //, sFechaN[pointIndex], sHoraFranjaN[pointIndex], Math.trunc(sNecesario[pointIndex]), Math.trunc(sCumplimiento[pointIndex])).toString();
        },
        show: true,
        showLabel: true,
        tooltipAxes: 'xy',
        sizeAdjust: 7.5, tooltipLocation: 'ne'
    }
});

我尝试更改barPadding(正值和负值),barMargin(正值和负值)和barWidth(正值) 也是轴默认垫(0-> 5)

0 个答案:

没有答案