在散点图中设置多个背景颜色

时间:2017-03-10 12:00:51

标签: javascript jquery css jqplot

我有jqplot库的散点图。我有这段代码:

$(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}}});
                });
            });     

问题很简单。我可以为谁设计象限的背景? 如果我改变网格背景,我只能改变一种颜色。我尝试将图像设置为bacgroun,但它不起作用,我需要做什么来获得像图像一样的东西? 我需要这样的东西:

Plot

1 个答案:

答案 0 :(得分:0)

您需要添加void fun() { int i; std::cout << &i << std::endl; } void fun2() { int i; std::cout << &i << std::endl; } void main() { fun2(); fun(); } 插件,然后应用此代码:

添加canvasOverlay

canvasOverlay

添加此代码

<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.canvasOverlay.js"></script>