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

用户名

我有这个带有 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 但它不起作用,我需要做什么才能获得类似图像的东西?我需要这样的东西:

阴谋

舷窗中的阿尔达

您需要添加canvasOverlay插件,然后应用此代码:

添加画布覆盖

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

添加此代码

canvasOverlay: {
                    show: true,
                    objects: [
                      { rectangle:  { xmin:min, xmax:0 , ymin: 0, ymax: max, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(255, 255, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                        { rectangle: { xmin:0, xmax:max , ymin: 0, ymax: max, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(0, 255, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                        { rectangle: { xmin:min, xmax:0 , ymin: min, ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(255, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                        { rectangle: { xmin:0, xmax:max , ymin: min, ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                color: "rgba(255, 165, 0, 0.3)", showTooltip: true, tooltipFormatString: "Ideal Zone" } },
                    ]
                  } 

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Matplotllib:在散点图中设置“不良”颜色

来自分类Dev

matplotlib中多个散点图中的异常颜色

来自分类Dev

如何在matplotlib的散点图中设置点的边框颜色?

来自分类Dev

使用不同的颜色为散点图中的每个象限的背景着色

来自分类Dev

Python-在绘图中将背景颜色设置为透明

来自分类Dev

顺序更改散点图中每个点的颜色

来自分类Dev

在散点图中按名称更改颜色

来自分类Dev

seaboarn 散点图中的预定义点颜色

来自分类Dev

ggplot2在散点图中为我提供R中的蓝调,我该如何设置光谱颜色?

来自分类Dev

根据存储在DataFrame列中的R,G,B在可绘制的3D散点图中设置标记的颜色

来自分类Dev

更改饼图中的背景颜色

来自分类Dev

设置 div 的背景颜色

来自分类Dev

无法设置背景颜色

来自分类Dev

Python散点图多个颜色条问题

来自分类Dev

Matplotlib散点图在图例和图中绘制不同的颜色

来自分类Dev

matplotlib上散点图中每个集合的颜色不同

来自分类Dev

如何在R中的散点图中为类赋予颜色?

来自分类Dev

如何自定义散点图中的颜色条?

来自分类Dev

将图例添加到动态颜色的matplotlib散点图中

来自分类Dev

使用颜色指示散点图中的三个不同值

来自分类Dev

nvd3.js-无法更改散点图中的符号颜色

来自分类Dev

Matplotlib散点图在图例和图中绘制不同的颜色

来自分类Dev

如何在R中的散点图中为类赋予颜色?

来自分类Dev

如何在散景散点图中显示不同颜色的图例?

来自分类Dev

在散点图中为 Iris 数据集使用不同的颜色

来自分类Dev

具有直方图轴的散点图中的颜色密度

来自分类Dev

在 R plotly 散点图中发出更改标记颜色的问题

来自分类Dev

如何设置BottomBar的背景颜色?

来自分类Dev

在附言中设置背景颜色

Related 相关文章

  1. 1

    Matplotllib:在散点图中设置“不良”颜色

  2. 2

    matplotlib中多个散点图中的异常颜色

  3. 3

    如何在matplotlib的散点图中设置点的边框颜色?

  4. 4

    使用不同的颜色为散点图中的每个象限的背景着色

  5. 5

    Python-在绘图中将背景颜色设置为透明

  6. 6

    顺序更改散点图中每个点的颜色

  7. 7

    在散点图中按名称更改颜色

  8. 8

    seaboarn 散点图中的预定义点颜色

  9. 9

    ggplot2在散点图中为我提供R中的蓝调,我该如何设置光谱颜色?

  10. 10

    根据存储在DataFrame列中的R,G,B在可绘制的3D散点图中设置标记的颜色

  11. 11

    更改饼图中的背景颜色

  12. 12

    设置 div 的背景颜色

  13. 13

    无法设置背景颜色

  14. 14

    Python散点图多个颜色条问题

  15. 15

    Matplotlib散点图在图例和图中绘制不同的颜色

  16. 16

    matplotlib上散点图中每个集合的颜色不同

  17. 17

    如何在R中的散点图中为类赋予颜色?

  18. 18

    如何自定义散点图中的颜色条?

  19. 19

    将图例添加到动态颜色的matplotlib散点图中

  20. 20

    使用颜色指示散点图中的三个不同值

  21. 21

    nvd3.js-无法更改散点图中的符号颜色

  22. 22

    Matplotlib散点图在图例和图中绘制不同的颜色

  23. 23

    如何在R中的散点图中为类赋予颜色?

  24. 24

    如何在散景散点图中显示不同颜色的图例?

  25. 25

    在散点图中为 Iris 数据集使用不同的颜色

  26. 26

    具有直方图轴的散点图中的颜色密度

  27. 27

    在 R plotly 散点图中发出更改标记颜色的问题

  28. 28

    如何设置BottomBar的背景颜色?

  29. 29

    在附言中设置背景颜色

热门标签

归档