jqplot grid на вершине графика

Question

Я занимаюсь графиком jqplot, где линии сетки сверху (или спереди в зависимости от того, как вы смотрите на него) графика, в отличие от фоновой области по умолчанию. Я сделал несколько попыток заставить его наложить сетку, используя z-index. Однако каждая попытка делает весь график нефункциональным, и по какой-то неизвестной причине я не получаю ошибки.

Я работаю со сложной гистограммой, которая на самом деле заполняет всю сетку, поэтому я не вижу ни одной из линий сетки, они все скрыты ниже (или позади) графика.

Вот код:

<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> 

Любой впадать в это требование и знать, как получить линии сетки, чтобы показать на верхней части графика? Спасибо

Answer 1

С помощью небольшой DOM-манипуляции вы можете сделать это, но вам нужно убедиться, что цвет фона сетки прозрачен для его работы. После Вашего участка вызова:

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

Вот пример fiddle.