jqPlot - Làm cách nào để thay đổi độ mờ đục hoặc z-index của canvasOverlay?

Question

Tôi muốn hiển thị 3 vùng màu trên biểu đồ của tôi trên nền theo giá trị trục y, như tôi hiểu, tôi không thể kiểm soát màu nền bằng các màu khác nhau.

Ý tưởng của tôi là vẽ 3 đường ngang với canvasOverlay - đang hoạt động. Vấn đề là tôi muốn đặt dòng này phía sau đường cong đồ thị của tôi, bây giờ nó nhìn thấy ở phía trước và nó phủ lên điểm của tôi.

Tôi có thể thay đổi thuộc tính z-index hoặc độ mờ đục không?

Có thể một số ý tưởng khác?

$.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 
        } 

       } 
      } 
     }); 

Answer 1

Tôi nghĩ rằng vấn đề của bạn có thể là thứ tự mà bạn làm bức tranh của mình. Tôi nghĩ rằng bạn lần đầu tiên tạo ra các đồ thị và sau đó trong nó bạn vẽ dòng này, phải không ?.

Vì vậy, để sắp xếp điều này, bạn có thể thử một trong các móc mà biểu đồ jqPlot cung cấp.

Để xem cách bạn có thể sử dụng móc, please see my other answer (BTW cho câu hỏi của riêng tôi :) nơi tôi đã sử dụng móc postDrawHooks để thay đổi định dạng nhãn khi biểu đồ được vẽ. Trong trường hợp của bạn, bạn có thể sử dụng preDrawHooks hoặc có thể phù hợp hơn để sử dụng preDrawSeriesHooks, vì tôi không chắc liệu canvas có sẵn sàng sử dụng khi chức năng được truyền trong số preDrawHooks được gọi hay không.

Hãy nhớ rằng, according to the documentation, các preDrawSeriesHooks được gọi mỗi lần trước khi một chuỗi được vẽ, do đó trong trường hợp của bạn, bạn sẽ cần nó để làm việc chỉ một lần.

EDIT

Trong trường hợp này câu trả lời rất đơn giản, cũng bạn có thể làm cả hai, mà được thể hiện trong jsfiddle tôi, available here.

Bạn cần đoạn mã này để gửi bạt che phủ để sao lưu, mà bạn nên đặt trước khi mã vẽ đồ thị của bạn:

$.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 
}); 

Nhưng khi nói đến opacity bạn có thể áp dụng nó cho bất cứ dòng bạn thích (còn thể hiện trong mã của tôi), sử dụng các phương pháp rgba(), cho loạt nó được thực hiện theo cách này:

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

cho các dòng trên vải, bạn làm điều đó như thế này:

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

---

EDIT2

Những suy nghĩ quan trọng nhất là do bị lãng quên với mã trước đây highlighter không hoạt động. Đơn giản là canvas sự kiện chịu trách nhiệm cho sự kiện bắt và tuyên truyền đã được ẩn bên dưới khung hình của chúng tôi. Nó đã được sửa trong phiên bản hiện tại của mã, bằng cách thiết lập một thích hợp z-index cho nó.Phương pháp hoàn chỉnh sẽ như thế nào:

$.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: Một giải pháp tốt hơn nhiều nơi mà chúng ta không cần phải lo lắng về việc thiết lập các z-index.

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

It is presented here. Giải pháp này là inspired by the answer provided by @Mark cho một loại vấn đề tương tự.

Answer 2

Một giải pháp tốt hơn là sử dụng Canvas đối tượng hình chữ nhật mà không cần bất kỳ hack 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" } } 
     ] 
     } 
    }); 
});