绘制如何以编程方式更改仪表的范围和颜色

Question

我想动态更新仪表的彩色步长范围。 仪表：

var humidityData = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 0,
    title: { text: "Feuchtigkeit" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 69 },
    gauge: {
      axis: { range: [40, 103] },
      steps: [
        { range: [10, 65], color: "red" },
        { range: [65, 68], color: "yellow" },
        { range: [68, 75], color: "lightgreen" },
        { range: [75, 78], color: "yellow" },
        { range: [78, 103], color: "red" },
      ],
    },
  },
];

但是以下内容不会更新范围：

if (temperature_soll!=20) {
    var temp_soll = ((20*1.8)+32)
    var temperature_update = {
      value: temperature,
      'delta.reference': temp_soll,
      'gauge.axis.range': [((40*1.8)+32), ((103*1.8)+32)],
      'gauge.steps.range': [((10*1.8)+32), ((65*1.8)+32)], color:"red",
      'gauge.steps.range': [((15*1.8)+32), ((18*1.8)+32)], color: "yellow",
      'gauge.steps.range': [((18*1.8)+32), ((22*1.8)+32)], color: "lightgreen",
      'gauge.steps.range': [((22*1.8)+32), ((25*1.8)+32)], color: "yellow",
      'gauge.steps.range': [((25*1.8)+32), ((30*1.8)+32)], color: "red",
    };
  };

颜色范围仍然相同：

在我之前的一篇文章中，这是嵌套值的特点。 这里似乎有相同的东西，但方式不同。 任何有关这方面的提示都会很好。

亲切的问候 弗兰克

Answer 1

您需要将

gauge.steps

指定为对象数组，每个对象都有其特定范围：

var temperature_update = {
  value: 14,
  'delta.reference': temp_soll,
  'gauge.axis.range': [((40*1.8)+32), ((103*1.8)+32)],
  'gauge.steps': [
    { range: [((10*1.8)+32), ((65*1.8)+32)], color:"red" },
    { range: [((15*1.8)+32), ((18*1.8)+32)], color: "yellow" },
    { range: [((18*1.8)+32), ((22*1.8)+32)], color: "lightgreen" },
    { range: [((22*1.8)+32), ((25*1.8)+32)], color: "yellow" },
    { range: [((25*1.8)+32), ((30*1.8)+32)], color: "red" }
  ]
}