Вопрос по – Как изменить непрозрачность или z-индекс canvasOverlay?

5

Я хотел бы показать 3 цветовые зоны на моем графике на фоне в соответствии со значением оси y, как я понимаю, я не могу контролировать цвет фона разными цветами.

Моя идея - нарисовать 3 горизонтальные линии с помощью canvasOverlay - это работает. Проблема в том, что я хочу разместить эти линии позади моей кривой графика, теперь она видна спереди и перекрывает линию моих точек.

Могу ли я изменить свойство z-index или непрозрачность?

Может быть, какие-то другие идеи?

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

                }
            }
        } );
</code>
обновлено кодом Katya
Я извиняюсь. Я забыл об этом - это мой собственный форматер для оси Y. Спасибо за jsfiddle - я не знал об этом. Katya
Кстати, что этоformatter: $.jqplot.tickNumberFormatter вtickOptions за? Я никогда не видел этого и не мог найти его в сети. Кроме того, поскольку это класс, его первая буква может быть заглавной. К какому плагину он принадлежит? Boro
Я не уверен, как и где именно вы это рисуете, пример кода был бы полезен. Не могли бы вы предоставить один, вероятно, вjsfiddle.net ? Boro
Пожалуйста, проверьте мойEDIT, Моя рекомендация для вас на будущее - использоватьjsfiddle вместо просто фрагментов кода. Это серьезно экономит время одного отвечающего, плюс вы и отвечающий уверены, что код точно показывает вашу проблему. В этом я должен был добавить свои данные и т. Д., А также удалить некоторые из них. Boro

Ваш Ответ

2   ответа
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" } }
        ]
      } 
  });
});
8

что ваша проблема может быть в порядке, в котором вы делаете свою картину. , что вы сначала создаете график, а затем рисуете эту линию, верно?

Таким образом, чтобы разобраться в этом, вы можете попробовать один из крючковjqPlot диаграмма обеспечивает.

Чтобы увидеть, как вы могли бы использовать крючок,пожалуйста, посмотрите мой другой ответ (Кстати на мой собственный вопрос :) где я использовалpostDrawHooks крючок для изменения формата меток после того, как график нарисован. В вашем случае вы могли бы использоватьpreDrawHooks или, возможно, более уместным было бы использоватьpreDrawSeriesHooks, так как я не уверен, готов ли холст для использования, когда функция передана вpreDrawHooks называется.

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

EDIT

В этом случае ответ прост, хорошо, вы можете сделать и то, и другое, как показано в моем 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 к аналогичной проблеме.

Привет, Боро, ты мне очень помог, я хочу поблагодарить тебя !!! Katya
Привет, Боро, последний вопрос - теперь я не вижу всплывающую подсказку, когда нажимаю на точку. Если я отменю $ («.jqplot-series-canvas»). Css («z-index», «1»); линия работает, но тогда z-индекс строки не годится. Katya
Привет, Боро, я много пробовал, но просто не могу заставить его работать. Пожалуйста помоги!!! что я сделал: $ (".jqplot-overlayCanvas-canvas") .css ("z-index", "0"); $ (".jqplot-series-canvas") .css ("z-index", "1"); $ («jqplot-highlight-canvas») .css («z-index», «10»); $ ("jqplot-highlighter-tooltip") .css ("z-index", "20"); Katya
Рад это слышать. Oi.
Мои быстрые предложения будут пытаться: 1. Настройка подходящегоz-index также для всплывающей подсказки. Или 2. Попытка установить соответствующие отрицательные значения для двух других холстов, так как я думаю, что по умолчаниюz-index элемента равняется нулю, тогда это имеет значение только в порядке, в котором они добавляются на страницу.

Похожие вопросы