javascript - Add text to generated quadrant area by x and y plot lines , highcharts -

-

i have scatter chart demonstrate load servers 2 dimensions , x , y.

and define 2 plot lines show if point overload, demo shows(just quick demo , copy link):

"http://codepen.io/anon/pen/xzprwa"

while, need demonstrate generated quadrant means labels like:

enter image description here

but can't find methods/options api achieve this, there simple method this? find position , put label absolute position?

you can define plotlines per x , y axis , catch load event. inside function, should extract position of lines , use renderer print labels. last step calculate osition proper quarter (by comparing plotlines , checking width of label - getbbox - function).

chart: {   events: {     load: function() {       var chart = this,         r = chart.renderer,         each = highcharts.each,         left = chart.plotleft,         top = chart.plottop,         h = chart.plotheight,         w = chart.plotwidth,         xaxis = chart.xaxis[0],         yaxis = chart.yaxis[0],         labels = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],         labelstyles = {           'font-size': '12px',           'color': 'red'         },         attr = {           zindex: 10         },         xplotline, yplotline,bbox, x, y;        chart.label = [];        xplotline = xaxis.topixels(xaxis.plotlinesandbands[0].options.value);       yplotline = yaxis.topixels(yaxis.plotlinesandbands[0].options.value);         //render       each(labels, function(label, i) {          chart.label[i] = r.text(label, 0, 0)           .attr(attr)           .css(labelstyles)           .add();          bbox = chart.label[i].getbbox();           console.log(w);         switch(i) {             case 0:             x = ((xplotline + left) / 2) - (bbox.width / 2);             y = ((yplotline + top) / 2) - (bbox.height / 2);             break;           case 1:             x = left + xplotline + ((w - xplotline)/2) - (bbox.width / 2);             y = ((yplotline + top) / 2) - (bbox.height / 2);             break;           case 2:             x = ((xplotline + left) / 2) - (bbox.width / 2);             y = top + yplotline + ((h - yplotline) / 2) - (bbox.height / 2);             break;           case 3:             x = left + xplotline + ((w - xplotline)/2) - (bbox.width / 2);             y = top + yplotline + ((h - yplotline) / 2) - (bbox.height / 2);             break;         }          chart.label[i].attr({             x: x,           y: y         });       });      }   } }, xaxis: {   plotlines: [{     id: 'ver',     color: '#ff0000',     width: 2,     value: 2   }] }, yaxis: {   plotlines: [{     id: 'hor',     color: '#ff0000',     width: 2,     value: 100   }] },

example: http://jsfiddle.net/x1zna57a/


Comments

Post a Comment

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

-
i trying display records table named staffpresentee database using clause... i using visual studio 2010... the table design follows- .......fieldname..................datatype........allownull 1......staff_id (fk).............numeric(18,0)......yes 2.......date........................date.............no 3......present.....................char(1)..........yes note type of 2nd field date , not datetime... i want display records table have today's date int 'date' field... current query is- cmd = new sqlclient.sqlcommand("select * staffpresentee date=" & date.now.date, cn) dr = cmd.executereader for dr = cmd.executereader error "operand type clash: date incompatible int" i tried select * staffpresentee query without clause runs correctly. try putting date value in sigle quotes maybe. cmd = new sqlclient.sqlcommand("select * staffpresentee date='" & _
Read more

SVG stroke-linecap doesn't work for circles in Firefox? -

-
i've got problem svg stroke-linecap attribute. i've got circular progress bar in angularjs , set outer circle (blue one) have rounded "ends". @ fiddle . <svg ... height="130" width="130"> <!-- ngif: background --> <circle ... ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" /> <!-- end ngif: background --> <circle ... fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)" /> </svg> how can that?
Read more

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -

-
here code im = cv2.imread('luffy.jpg') gray = cv2.cvtcolor(im,cv2.color_bgr2gray) ret,thresh = cv2.threshold(gray,127,255,0) contours,h = cv2.findcontours(thresh,cv2.retr_tree,cv2.chain_approx_simple) cnt in contours: moment = cv2.moments(cnt) c_y = moment['m10']/(moment['m00']+0.01) c_x = moment['m01']/(moment['m00']+0.01) centroid_color = im[c_x,c_y] centroid_color = np.array((centroid_color[0],centroid_color[1],centroid_color[2])) print type(centroid_color) cv2.fillpoly(im,cnt,centroid_color) i getting error on last line try , pass centroid_color color argument. <type 'numpy.ndarray'> , have been able pass data type cv2.fillpoly color in other instances, not sure why having problem here. fillpoly() expects iterable, i.e. put cnt in brackets. believe duplicate of https://stackoverflow.com/a/17582850/5818240 . moreover, centroid color variable contains strings. need convert them i
Read more