5

y軸の値に応じて、背景のグラフに3つのカラーゾーンを表示したいと思います。理解しているように、背景色を異なる色で制御することはできません。

私のアイデアは、canvasOverlayを使用して3本の水平線を描画することです。これは機能しています。問題は、この線をグラフ曲線の後ろに配置したいということです。これが前面に表示され、ポイント線に重なっています。

z-indexのプロパティまたは不透明度を変更できますか？

多分他のアイデア？

  $.jqplot( 'ChartDIV', [data],
        {
            series: [{ showMarker: true}],
            highlighter: {
                sizeAdjust: 10,
                show: true,
                tooltipLocation: 'n',
                useAxesFormatters: true
            },

            tickOptions: {
                formatString: '%d'
            },
            canvasOverlay: {
                show: true,
                objects: [ 
                            {
                                horizontalLine: 
                                {      
                                    name: 'low', 
                                    y: 1.0,
                                    lineWidth: 100,
                                    color: 'rgb(255, 0, 0)',
                                    shadow: false 
                                }
                            },      
                            {
                                horizontalLine:
                                { 
                                    name: 'medium',
                                    y: 2.0,
                                    lineWidth: 100, 
                                    color: 'rgb(250, 250, 0)', 
                                    shadow: true 
                                }
                            },
                            {
                                 horizontalLine:
                                {
                                    name: 'high',
                                    y: 3.0,
                                    lineWidth: 100,
                                    color: 'rgb(145, 213, 67)',
                                    shadow: false
                                }
                             },  
                        ]       
                    },
            axes: {
                xaxis:
                {
                    label: 'Dates',
                    renderer: $.jqplot.DateAxisRenderer,
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    tickOptions: {
                        formatString: '%d/%m/%Y',
                        angle: -30,
                        fontFamily: 'Arial',
                        fontSize: '13px',
                        fontWeight: 'bold'
                    },
                    min: d[0] + "/" + d[1] + "/01", 
                    tickInterval: '2 month',
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3'
                    }
                },
                yaxis:
                {
                    label: 'Level',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickOptions: {
                        formatter: $.jqplot.tickNumberFormatter
                    },
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3',
                        angle: -90
                    }

                }
            }
        } );
4

2 に答える 2

8

あなたの問題はあなたが絵を描く順番にあるのではないかと思います。最初にグラフを作成してから、その中にこの線を引くと思いますよね？

したがって、これを整理するには、jqPlotチャートが提供するフックの1つを試してみてください。

フックの使用方法については、グラフが描画されたらフックを使用してラベルの形式を変更した他の回答（BTWから私自身の質問へ:)を参照してください。postDrawHooksあなたの場合、渡された関数が呼び出されたときにキャンバスを使用する準備ができているかどうかわからないため、preDrawHooksを使用するか、または使用する方が適切かもしれません。preDrawSeriesHookspreDrawHooks

ドキュメントによると、preDrawSeriesHooksシリーズが描画される前に毎回呼び出されるため、この場合は1回だけ機能する必要があることに注意してください。

編集

この場合、答えは簡単です。両方を行うことができます。これは、ここで入手できる私のjsfiddleに示されています。

オーバーレイキャンバスを背面に送信するには、次のコードが必要です。これは、グラフをペイントするコードの前に配置する必要があります。

$.jqplot.postDrawHooks.push(function(){
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0');//send overlay canvas to back
    $(".jqplot-series-canvas").css('z-index', '1');//send series canvas to front
});

しかし、不透明度に関しては、メソッドを使用して、好きな行（私のコードにも示されています）に適用できます。rgba()シリーズの場合、次のように実行されます。

seriesColors:['rgba(100, 150, 100, 0.75)']

キャンバス上の線の場合、次のようにします。

color: 'rgba(145, 213, 67, 0.25)'

EDIT2

最も重要な考えは忘れられていたため、前のコードでは蛍光ペンが機能していませんでした。イベントのキャッチと伝播を担当するイベントキャンバスは、キャンバスの下に隠されていました。現在のバージョンのコードでは、適切な設定を行うことで修正されてz-indexいます。完全なメソッドは次のようになります。

$.jqplot.postDrawHooks.push(function() {
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back  
    $(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front         
    $(".jqplot-highlighter-tooltip").css('z-index', '2'); //make sure the tooltip is over the series
    $(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
});

EDIT3： 設定について心配する必要がないはるかに優れたソリューションz-index。

$.jqplot.postDrawHooks.push(function() {
    var overlayCanvas = $($('.jqplot-overlayCanvas-canvas')[0])
    var seriesCanvas = $($('.jqplot-series-canvas')[0])
    seriesCanvas.detach();
    overlayCanvas.after(seriesCanvas);
});

ここに表示されます。このソリューションは、同様の種類の問題に対して@Markが提供する回答に触発されています。

于 2012-05-03T08:51:02.263 に答える
1

はるかに優れた解決策は、ハッキングせずにCanvas長方形オブジェクトを使用することです http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html 

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], {
      canvasOverlay: {
        show: true,
        objects: [
          { rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } },
          { rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } }
        ]
      } 
  });
});
于 2014-08-18T15:33:27.823 に答える