是否可以在剑道UI线性仪表上仅显示最大值/最小值

Is it possible to show only the max / min values on a Kendo UI linear gauge?

本文关键字：显示 最大值 最小值 仪表 线性 UI 是否      更新时间：2023-09-26

我目前有一个线性仪表，看起来像这样：

$("#depthBar-" + conveyanceId).kendoLinearGauge({
    pointer: {
        value: 0,
        shape: "arrow",
        color: "transparent",
        start: 0,
        reverse: true
    },
    scale: {
        majorUnit: 500,
        minorUnit: 100,
        min: -2000,
        max: 2000,
        vertical: false,
        reverse: false,
        ranges: [
            {
                from: -2000, // LimitLo
                to: -1500,
                color: "#ffc700"
            },
            {
                from: 2000, // LimitHi
                to: 1500,
                color: "#ffc700"
            }, {
                from: 2000, // LimitHiHi
                to: 1800,
                color: "#c20000"
            }, {
                from: -5000,
                to: -1800,
                color: "#c20000" // LimitLoLo
            }, {
                from: 0,
                to: 286,
                color: "lightblue"
            }
        ]
    }
});

是否可以让条形仅显示最大和最小标签，而不显示介于两者之间的标签？在这种情况下，我希望它只在刻度的一端显示"-2000"，在另一端显示"2000"。

好吧，您可以将秤标签上的模板设置为函数，做一些数学运算并仅返回所需的标签。

labels: {
             // labels template
             template: getLabel
         }

和 

function getLabel(e) {
  if(e.value === 2000) {
    return 2000;
  }
  else if(e.value === -2000) {
    return -2000;
  }
  else {
    return '';
  }
}

似乎有点好，可能有更好的方法，但这应该做我认为你想要的。 （样本 http://jsbin.com/aKAVOnE/1/edit）

设置模板可以正常工作。通常，当我需要完成此操作时，我会计算最大值和最小值之间的差异，并通过参数或在仪表创建计算中将其设置为主要单位。

设置主要单位值，如最大值

演示

$("#gauge").kendoRadialGauge({
        pointer: {
            value: $("#gauge-value").val()
        },
        scale: {
            majorUnit:180,
            minorUnit: 5,
            startAngle: -30,
            endAngle: 210,
            max: 180
        }
    });
}
相关文章：