如何动态添加多个 Y 轴到 plotly.js 绘图

问题描述

我有几个复选框，选择它们应该会向现有折线图添加跟踪。我想要多个 y 轴，因为它们的值差别很大。

我从 AJAX 调用中读取新值，每隔一秒更新一次图表。并创建一个 dict 来存储应该绘制的痕迹。

这是我所做的：

var interval = setInterval(function() {
    $.ajax({
        url : 'ajax/updatevalues',dataType : 'json',type : 'GET',success: function(data)
        {
            var dateStr = JSON.parse(data.temperature.last_timestamp);
            temp_time = new Date(dateStr);
            temp_temperature = data.temperature.last;
            temp_d850 = data.d850.last;
            temp_d280 = data.d280.last;

            index.push(temp_time);
            temperature.push(data.temperature.last);
            d850.push(data.d850.last);
            d280.push(data.d280.last);
        }
    });
    temperature_list = [];
    d850_list = [];
    d280_list = [];

    $('input[type=checkBox]').each(function () {

        num = get_number_of_traces();
        new_y = num[num.length-1];

        if(this.checked == true){
            if(this.name == 'Temperature'){
                temperature_filtered = get_filtered_data(temperature);
                trace_temperature = draw_trace_data(new_y,get_filtered_index(),temperature_filtered,"Temperature [°C]" );  
                dict_traces[document.getElementById('temperature').name] = trace_temperature;
            }else if(this.name == 'D850'){
                d850_filtered = get_filtered_data(d850);
                trace_d850  = draw_trace_data(new_y,d850_filtered,"D850" );
                dict_traces[document.getElementById('d850').name] = trace_d850;
            }else if(this.name == 'D280'){
                d280_filtered = get_filtered_data(d280);
                trace_d280  = draw_trace_data(new_y,d280_filtered,"D280" ); 
                dict_traces[document.getElementById('d280').name] = trace_d280;
            }
        }

        values = Object.keys(dict_traces).map(function(key){
            return dict_traces[key];
        });
        
    });
    Plotly.newPlot(testGraph,values);
    cnt++;

    var i=0;


    // updating the graphs layout for each trace
    Object.keys(dict_traces).forEach(function(key) {
        Plotly.relayout(testGraph,{
                            ["yaxis" + i]: {
                                title: "y" + i,overlaying: "y1",side: "left",position: 0.1 * (i)
                            },xaxis: {
                                domain : [0.1 * (i ),1]
                            }
                            }
        );
        i++;
    });
if(++cnt === 100) clearInterval(interval);
},1000);

当我点击新的复选框时。图形变小，这意味着 xaxis 属性正在影响绘图，但没有新的 y 轴添加到绘图中。

我做错了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）