Hi, please refer to my attached png. You can find lable values, such as : 0 , 250 , 500 ,750 ... 2500 . That's because I set labelInterval=250.
But I have the requirement to set range's end value , the range property I defined is below :
ranges: [ { name: "range1", brush: "rgba(142, 199, 8, 1)", startValue: "0", endValue: "500"}, { name: "range2", brush: "rgba(235, 217, 11, 1)", startValue: "500", endValue: "900"}, { name: "range3", brush: "rgba(62, 211, 205, 1)", startValue: "900", endValue: "1600"}, { name: "range4", brush: "rgba(206, 109, 240, 1)", startValue: "1600", endValue: "2100"}, { name: "range5", brush: "rgba(233, 52, 61, 1)", startValue: "2100", endValue: "2500" } ]
I just want to show numbers : 0 , 500 ,900 , 1600 ,2100 ,2500 . not the numbers I set by labelInterval .
Do I make mysefy clearly? Thanks in advance.
Hello Charlie,
You can handle the igRadialGauge.alignLabel event and filter out the unnecessary labels like this:
alignLabel: function(evt, ui) { var rangeLabels = []; rangeLabels.push(ui.owner.options.ranges[0].startValue); for (var i = 0; i < ui.owner.options.ranges.length; i++) { rangeLabels.push(ui.owner.options.ranges[i].endValue); } if (rangeLabels.indexOf(ui.label) === -1) { ui.label = ""; } }
alignLabel: function(evt, ui) {
var rangeLabels = [];
rangeLabels.push(ui.owner.options.ranges[0].startValue);
for (var i = 0; i < ui.owner.options.ranges.length; i++) {
rangeLabels.push(ui.owner.options.ranges[i].endValue);
}
if (rangeLabels.indexOf(ui.label) === -1) {
ui.label = "";
Hope this helps, Martin Pavlov Infragistics, Inc.
Hello Martin ,
Thanks for your quick response.
According your answer, I fount the result is as below.
As your method, the result just filter out the unnecessary labels. But "900,1600,2100" are not included in the result.
You should also set the labelInterval to 100.
Best regards,Martin PavlovInfragistics, Inc.
Thanks very much. This solved my problem.
I found that if I put this method in formatLabel, it works find too.
Can you please tell me what's the difference between formatLabel and alignLabel. I found that in the API, the alignLabel event 's property is more that the formatLabel event 's property .
You're right. The formatLabel event seems more appropriate in this case. The difference is that the alignLabel is more sophisticated and can change the label position (width, height, offsetX, offsetY) while formatLabel can change only "value" and "label" arguments.