Plotly.js点无序排列

Question

我创建了一个包含两条包含从查询中检索的数据的跟踪的图。我可以想到构建绘图的唯一方法是使用addTraces和relayout绘制查询回调（尽管我想我也可以使用redraw）。

数据具有重叠的x值，即日期。出于某种原因，第一条迹线的x值在绘制第二条迹线时会混乱。 （我可以使用注释掉的第33和88行进行测试。）

https://jsfiddle.net/abalter/90cqhwad/

使用Javascript：

// 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 data1_url = "https://rawgit.com/abalter/96aecf230859789ebe5a107b3e3f8fd8/raw/lk-sample-data-1.json"

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

var data2_url = "https://rawgit.com/abalter/96aecf230859789ebe5a107b3e3f8fd8/raw/lk-sample-data-2.json"

var plot_data = {
  y_left: {},
  y_right: {},
  events: []
};

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) {

  console.log("in plotSelected");
  console.log("y_left: " + plot_data.y_left.field + " y_right: " + plot_data.y_right.field);

  // get y_left
  if (plot_data.y_left.field != "none") {
    //if (plot_data.y_left.field != "none" || false) {
        console.log("creating left plot");

    var left_url = plot_data.y_left.url;
    var left_field_name = plot_data.y_left.field;
    console.log("left field name: " + left_field_name);

    var left_timeline = new timeline_template();
    left_timeline.name = left_field_name;
    console.log("left_timeline.name: " + left_timeline.name);
    console.log("left_timeline.type: " + left_timeline.type);
    console.log("left_timeline.mode: " + left_timeline.mode);
    console.log("left_timeline 1");
    console.log(left_timeline);

    var left_x_axis = new x_axis_template();
    left_x_axis.type = "date";
    left_x_axis.tickmode = "auto";
    left_x_axis.nticks = 5;
    //x_axis.name = left_field_name;
    delete left_x_axis.ticktext;
    delete left_x_axis.tickvals;

    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;

    var left_layout = new layout_template();
    left_layout.yaxis1 = left_y_axis;
    left_layout.xaxis = left_x_axis;

        console.log("left timeline");
    console.log(left_timeline);
    console.log("left layout");
    console.log(left_layout);

    console.log("querying for field " + left_field_name);
    queryTable
      (
        left_url,
        left_field_name,
        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
      )
  };

  // get y_right
  if (plot_data.y_right.field != "none") {
  //if (plot_data.y_right.field != "none" && false) {
        console.log("creating left plot");

    var right_url = plot_data.y_right.url;
    var right_field_name = plot_data.y_right.field;

    var right_timeline = new timeline_template();
    right_timeline.name = right_field_name;

    var right_x_axis = new x_axis_template();
    right_x_axis.type = "date";
    right_x_axis.tickmode = "auto";
    right_x_axis.nticks = 5;
    delete right_x_axis.ticktext;
    delete right_x_axis.tickvals;
    //x_axis.name = right_field_name;

    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";

    var right_layout = new layout_template();
    right_layout.yaxis2 = right_y_axis;
    right_layout.xaxis = right_x_axis;

    console.log("right timeline");
    console.log(right_timeline);
    console.log("right layout");
    console.log(right_layout);

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

  }

}


function queryTable // parameters
(
  url,
  field_name,
  processSucccess, // success callback
  processError // error callback
) {
  console.log("in queryTable " + field_name);

  var jqxhr = $.getJSON(url)
    .done(processSucccess)
    .fail(processError)
    .always(function() {
      console.log("complete");
    });
}

function addToGraph(
  results,
  field_name,
  layout,
  timeline
) {

    addToGraph.q = 0; // cheap hack to create index for plotly data

  console.log("in addToGraph. field: " + field_name);

  //var rows = results.rows;
  var rows = results;

  rows.sort(function(v1, v2)
  {
        return new Date(v1['date']) - new Date(v2['date']);
    });

  console.log("rows");
  console.log(rows);

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

  var length = rows.length;
  console.log("num rows returned " + length);

  var x = [];
  var y = [];

  for (var idxRow = 0; idxRow < length; idxRow++) {
    var row = rows[idxRow];
    //console.log("row " + idxRow);
    //console.log(row);
    x.push(row.date);
    y.push(row.val);
  }

  //console.log(x);
  //console.log(y);

  timeline.x = x;
  timeline.y = y;
  //layout.xaxis.tickvals = x;
  //layout.xaxis.ticktext = x;

  //addToPlot('plot-container', timeline, layout);

  console.log("x values");
  console.log(timeline.x);
  console.log("y values");
  console.log(timeline.y);
    console.log("layout");
  console.log(layout);


  console.log("plotting " + timeline.name);
  console.log("adding trace for " + timeline.name);
  console.log(timeline);
  //Plotly.addTraces('plot_container', [timeline], [addToGraph.q]);
  Plotly.addTraces('plot_container', [timeline]);

  console.log("adding layout for " + timeline.name);
  console.log(layout);
  //Plotly.relayout('plot_container', layout, [addToGraph.q]);
  Plotly.relayout('plot_container', layout);

  //Plotly.plot('plot-container', [timeline], layout);

    console.log("q " + addToGraph.q);
  addToGraph.q += 1;

}