如何通过代码动态更新Plotly仪表盘的量程与颜色区间

我想动态更新Plotly仪表盘的彩色步骤区间量程，初始湿度仪表盘代码如下，但尝试更新时彩色区间仍保持原有状态，之前碰到过嵌套值相关的问题，怀疑这次也是类似情况，求解决提示。

初始湿度仪表盘代码 #

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': [((10*1.8)+32), ((30*1.8)+32)],
      'gauge.steps.range': [((10*1.8)+32), ((15*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",
    };
  };

问题分析与解决方法 #

核心问题 #

1. 重复属性覆盖：你在temperature_update里多次使用'gauge.steps.range'作为键，JavaScript对象中重复键会被最后一次赋值覆盖，根本无法生成完整的步骤数组。
2. 数组类型属性更新错误：Plotly的gauge.steps是数组类型，更新时需要直接传入完整的数组，不能试图通过点语法逐个修改数组元素的属性。

修正后的更新代码 #

if (temperature_soll != 20) {
    // 提取重复计算的变量，简化代码
    const temp_soll = (20 * 1.8) + 32;
    const minRange = (10 * 1.8) + 32;
    const maxRange = (30 * 1.8) + 32;
    
    const temperature_update = {
        value: temperature,
        'delta.reference': temp_soll,
        'gauge.axis.range': [minRange, maxRange],
        // 直接传入完整的steps数组替换原有配置
        'gauge.steps': [
            { range: [minRange, (15 * 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, maxRange], color: "red" }
        ]
    };
    
    // 必须调用Plotly.update方法，替换为你的实际图表容器ID
    Plotly.update('your-gauge-chart-id', temperature_update);
};

额外注意事项 #

• 确保调用Plotly.update()时传入正确的图表容器ID，这是更新生效的关键步骤。
• 把重复计算的温度转换值抽成变量，既减少冗余代码，也方便后续调整参数。
• 对于Plotly中所有数组类型的配置项（如steps、data数组），更新时都需要直接传入完整的数组进行替换，不能通过嵌套路径修改单个元素。

内容的提问来源于stack exchange，提问作者venni