在情节之上的jqplot网格 [英] jqplot grid on top of plot

问题描述

我一直在修补jqplot图表，其中网格线位于图形的顶部（或在前面，具体取决于您的视图），而不是默认的背景区域。我已经多次尝试使用z-index覆盖网格。但是，每次尝试都会使整个图形无法正常运行，并且由于某种未知原因我没有收到任何错误。

I've been tinkering with a jqplot graph where the grid lines are on top (or in front depending how you look at it) of the graph as opposed to the default background area. I've made several attempts to get it to overlay the grid using the z-index. However, each attempt renders the entire graph non-functional and I receive no error for some unknown reason.

我正在使用实际填充整个图形的堆积条形图网格，所以我没有看到任何网格线，它们都隐藏在图形的下方（或后面）。

I'm working with a stacked bar chart that actually fills the entire grid, so I don't get to see any of the grid lines, they are all hidden beneath (or behind) the graph.

这是代码：

<script type="text/javascript" language="javascript">
   $.jqplot.config.enablePlugins = true;

   var plot;
   var data1 = [];
   var data2 = [];
   var index = 0;
   var num = 0;
   var delta = 0;

   $(document).ready(function(){
      for (i=0; i<100; i++) {
         num = getRandomNumber();
         delta = 100 - num;
         index++;
         data1.push([ index, num]);
         data2.push([ index, delta]);
      }

      plot = $.jqplot('graph', [data1, data2],{
                title: 'my title',
                animate: true,
                stackSeries: true,
                seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        rendererOptions: { highlightMouseDown: true },
                        pointLabels: {show: true}
                },
                series: [ {label: 'one'}, {label: 'two'} ],
                seriesColors:['#ff0000', '#0000ff'],
                legend: {
                        show: true,
                        location: 'e',
                        placement: 'outsideGrid'
                },
                grid: {
                        gridLineColor: '#333333',
                        borderWidth: 0
                },
                axesDefaults: {
                        pad: 0,
                        padMin: 0
                },
                axes: {
                        xaxis: {
                                showTicks: false,
                                pad: 0,
                                padMin: 0,
                                rendererOptions: { forceTickAt0: true, forceTickAt100: true }
                        },
                        yaxis: {
                                pad: 0,
                                padMin: 0,
                                rendererOptions: { forceTickAt0: true, forceTickAt100: true }
                        }
                }
      });
   });

   getRandomNumber = function(){
                return Math.floor(Math.random()* 100);
   };
  </script>

任何人都遇到此要求并知道如何让网格线显示在图表的顶部？谢谢

Anyone run into this requirement and know how to get the grid lines to show up on top of the graph? Thanks

推荐答案

通过一些DOM操作你可以做到这一点但是你需要确保为它设置透明的网格背景颜色上班。你的情节调用之后：

With a little DOM manipulation you can do this BUT you need to make sure to set the grid background color transparent for it to work. After your plot call:

gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);​

这是一个示例小提琴。

这篇关于在情节之上的jqplot网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！