1

デフォルトの背景領域とは対照的に、グリッド線がグラフの上部（または、見方によっては前）にある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>

誰もがこの要件に遭遇し、グリッド線をグラフの上に表示する方法を知っていますか? ありがとう

4

1 に答える 1

2

少しDOMを操作するだけでこれを行うことができますが、グリッドの背景色を透明に設定して機能させる必要があります。プロット呼び出しの後:

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

サンプルのfiddleを次に示します。

于 2012-06-27T14:38:50.583 に答える