Plotly.js右轴没有显示出来

Question

修改

更新了简化和评论的代码，以及新的小提琴。

我正在创建一个包含两条跟踪的图，其中包含从查询中检索到的数据。我可以想到构建绘图的唯一方法是使用addTraces和relayout在查询回调中绘图（虽然我想我也可以使用重绘）。

我已经设定：

layout.yaxis1.position = 0;
layout.yaxis1.side = "left";
layout.yaxis2.position = 1;
layout.yaxis2.side = "right"

但我没有得到y轴。

https://jsfiddle.net/abalter/szrwnyup/

Javasript：

// start out with empty plot
Plotly.newPlot("plot_container",[],{title: "Plot"});

var data1_url = "https://rawgit.com/abalter/d629a25cd7954d897206ea78cdfba35d/raw/plot-data-1.json";

var data2_url = "https://rawgit.com/abalter/d629a25cd7954d897206ea78cdfba35d/raw/plot-data-2.json";

var plot_data = {
  y_left: {},
  y_right: {},
};

plot_data.y_left.url = data1_url;
plot_data.y_left.field = "Left";

plot_data.y_right.url = data2_url;
plot_data.y_right.field = "Right";

plotSelected(plot_data);

function plotSelected(plot_data) {

    // Configure left side plot
  if (plot_data.y_left.field != "none") {
    //Uncomment below to test plotting single trace
    //if (plot_data.y_left.field != "none" && false) {

    // get URL for query 
    var left_url = plot_data.y_left.url;
    var left_field_name = plot_data.y_left.field;

    // get default timeline data for left trace
    var left_timeline = new timeline_template();
    left_timeline.name = left_field_name;
    delete left_timeline.yaxis; // removing from my template to avoid problems

    // get default xaxis data for left xaxis
    var left_x_axis = new x_axis_template();
    left_x_axis.autorange = true;
    left_x_axis.nticks = 5;
    left_x_axis.yaxis = "y1";
    left_x_axis.overlaying = false;

    // get default yaxis data for left yaxis
    var left_y_axis = new y_axis_template();
    left_y_axis.title = left_field_name;
    left_y_axis.domain = [0, 1];
    left_y_axis.side = "left";
    left_y_axis.position = 0;

    // get default layout data for left layout
    var left_layout = new layout_template();
    left_layout.yaxis1 = left_y_axis;
    left_layout.xaxis = left_x_axis;

    // query URL for data and add results to plot
    queryTable
    (
      left_url,
      function(results) {
        addToGraph(results, left_field_name, left_layout, left_timeline);
      }, // success callback
      function(error) {
        console.log("query error for1 " + left_field_name);
        console.log(error);
      } // error callback
    )
  } // end if for left side plot

  // Configure right hand plot
  if (plot_data.y_right.field != "none") {
  // Comment out below to test just right hand plot
  //if (plot_data.y_right.field != "none" && false) {

    // get URL for query
    var right_url = plot_data.y_right.url;
    var right_field_name = plot_data.y_right.field;

        // Get default timeline data for right trace
    var right_timeline = new timeline_template();
    right_timeline.name = right_field_name;
    right_timeline.yaxis = "y2";

    // get default xaxis for right xaxis
    var right_x_axis = new x_axis_template();
    //right_x_axis.tickmode = "auto";
    right_x_axis.autorange = true;
    right_x_axis.nticks = 5;
    right_x_axis.anchor = "y2";
    right_x_axis.overlaying = false;
    //x_axis.name = right_field_name;

        // Get default yaxis for right yaxis
    var right_y_axis = new y_axis_template();
    right_y_axis.title = right_field_name;
    right_y_axis.domain = [0, 1];
    right_y_axis.side = "right";
    right_y_axis.position = 1;
    right_y_axis.side = "right";
    right_y_axis.overlaying = "y";
    right_y_axis.anchor = "free";

        // Get default layout for right layout
    var right_layout = new layout_template();
    right_layout.yaxis2 = right_y_axis;
    right_layout.xaxis = right_x_axis;

    queryTable
    (
      right_url,
      function(results) {
        addToGraph(results, right_field_name, right_layout, right_timeline);
      }, // success callback
      function(error) {
        console.log("query error for " + right_field_name);
        console.log(error);
      } // error callback
    );

  } // end if right

} // end plotSelected


function queryTable 
(
  url, // URL for the data
  processSucccess, // success callback (addToGraph)
  processError // error callback
) {
    // query for the data
  var jqxhr = $.getJSON(url)
    .done(processSucccess) 
    .fail(processError)
    .always(function() {
      console.log("complete");
    });
}

function addToGraph
(
  results, // data back from query
  field_name, // name of field plotted (for legend and axis title)
  layout, // plotly layout
  timeline // plotly trace
) {

  var rows = results.rows;

  if (rows.length == 0) {
    console.log("no rows returned for table " + table_name + " field " + field_name);
    return false;
  }

  var length = rows.length;
  var x = [];
  var y = [];

    // fill data arrays for the trace
  for (var idxRow = 0; idxRow < length; idxRow++) {
    var row = rows[idxRow];
    x.push(row.x);
    y.push(row.y);
  }

    // set the trace data in the timeline object
  // all other options have already been set
  timeline.x = x;
  timeline.y = y;
  layout.xaxis.tickvals = x;
  layout.xaxis.ticktext = x;

    // update plot with new trace/layout
  Plotly.addTraces('plot_container', [timeline]);
  Plotly.relayout('plot_container', layout);

}