0

Hola estoy usando la libreria jqplotpara realizar ciertas pruebas, he creado un grafico de tipo scatter y lo he dividido en 4 cuadrantes.

Este es el codigo del script

$(document).ready(function() {                

                var qr = [
                    [1, 5, null],
                    [4, 2, null],
                    [6, 5, '2'],
                    [4, 5, '3'],
                    [0, 5, null],
                    [4, 5, '3'],
                    [6, 5, '2'],
                    [4, 5, '3']
                ];
                var max = 15;
                var min = -15;                                            
                var gr_html = null;
                gr_html = $.jqplot('linegraph', [qr], {
                    seriesDefaults: {
                        showLine: false,
                        markerRenderer: $.jqplot.MarkerRenderer,
                        markerOptions: {
                            size: 5
                        }
                    },
                    series: [{
                        pointLabels: {
                            show: false,
                        },
                        markerOptions: {
                            style: 'triangle',
                            size: 5,
                        },
                    }],
                    axes: {
                        xaxis: {
                            label: 'Score',
                            min: min,
                            max : max,
                            numberTicks: 3,
                            showGridline: false
                        },
                        yaxis: {
                            renderer: $.jqplot.canvasTextRenderer,
                            label: 'Rate',
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                            labelOptions: {
                                fontSize: '10pt'
                            },
                            min: min,
                            max : max,
                            numberTicks: 3,
                            showGridline: false
                        },
                    },
                    grid: {
                        drawGridLines: true,        // wether to draw lines across the grid or not.
                        gridLineColor: '#cccccc',   // *Color of the grid lines.
                        background: '#fffdf6',      // CSS color spec for background color of grid.
                        borderColor: '#999999',     // CSS color spec for border around grid.
                        borderWidth: 2.0,           // pixel width of border around grid.
                        shadow: true,               // draw a shadow for grid.
                        shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
                        shadowOffset: 1.5,          // offset from the line of the shadow.
                        shadowWidth: 3,             // width of the stroke for the shadow.
                        shadowDepth: 3,             // Number of strokes to make when drawing shadow.
                                                    // Each stroke offset by shadowOffset from the last.
                        shadowAlpha: 0.07,          // Opacity of the shadow
                        renderer: $.jqplot.CanvasGridRenderer,  // renderer to use to draw the grid.
                        rendererOptions: {}         // options to pass to the renderer.  Note, the default
                                                    // CanvasGridRenderer takes no additional options.
                    }
                });         

                

                
                
                
                $("#botonZoom").click(function(){
                    max = max -1;
                    min = min +1;
                    gr_html.replot({resetAxes:['xaxis'], axes:{xaxis:{max:max,min:min,numberTicks:3}}});
                    gr_html.replot({resetAxes:['yaxis'], axes:{yaxis:{max:max,min:min,numberTicks:3}}});
                    
                    <!-- gr_html.replot({resetAxes:true}) -->
                });
                $("#botonZoom2").click(function(){
                    max = max +1;
                    min = min-1;
                    gr_html.replot({resetAxes:['xaxis'], axes:{xaxis:{max:max,min:min,numberTicks:3}}});
                    gr_html.replot({resetAxes:['yaxis'], axes:{yaxis:{max:max,min:min,numberTicks:3}}});
                });
            });

El cual me deja un grafico tal que asi: Grafico 1

Mi intencion seria que cada cuadrante tuviera un color distinto, algo de este estilo:

Grafico 2

No hagais mucho caso a que los graficos sean distintos, es para que se comprenda como quiero pintar los cuadrantes

2 respuestas 2

1

Puedes usar un rectangle overlay como se explica en la documentacion: http://www.jqplot.com/examples/draw-rectangles.php agregando en la configuracion del objeto la seccion canvasOverlay y estableciendo los valores correctos de xmin, xmax, ymin, ymax mas el resto de configuraciones de color y formato.

canvasOverlay: {
    show: true,
    objects: [
      { rectangle: { xmin:3.5, xmax: 8.2, ymin: 10, ymax: 70, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                color: "rgba(200, 100, 100, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
    ]
  } 
1
  • Funciona muchas gracias el 13 mar. 2017 a las 14:46
0

No puedo ver tus imágenes por que en este momento la pc tiene filtros, pero si entendí bien, si es posible, te mando un link de un ejemplo y el código:

http://www.jqplot.com/examples/multipleBarColors.php

<script type="text/javascript" class="code">
$(document).ready(function(){
    // A Bar chart from a single series will have all the bar colors the same.
    var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];

    $('#chart1').jqplot([line1], {
        title:'Default Bar Chart',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});
</script>

<script type="text/javascript" class="code">
$(document).ready(function(){
    var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];

    $('#chart2').jqplot([line1], {
        title:'Bar Chart with Varying Colors',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                // Set the varyBarColor option to true to use different colors for each bar.
                // The default series colors are used.
                varyBarColor: true
            }
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});
</script>

<script type="text/javascript" class="code">
$(document).ready(function(){
    var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];

    $('#chart3').jqplot([line1], {
        title:'Bar Chart with Custom Colors',
        // Provide a custom seriesColors array to override the default colors.
        seriesColors:['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                // Set varyBarColor to tru to use the custom colors on the bars.
                varyBarColor: true
            }
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});
</script>

Saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.