Plotly.js第二个Y轴未缩放

时间:2016-05-09 21:05:31

标签: javascript plotly

我有两组独立的x-y数据。 x值都是公共范围内的日期(但不同的特定点)。 y值适用于具有不同范围的完全不同的数据。

  1. 左侧y数据是自动缩放的,因此它最大程度地使用[0,1]域。右手数据不是

  2. 我在GUI中为两个y轴选择了自动缩放。左轴仍然为gui和JSON中显示的数据提供了一些奇怪的范围,尽管JSON确实有autorange = true。

  3. 右轴未在GUI中显示自动量程。 {
    data:[
    {
    name:"Col2", type:"scatter", mode:"lines+markers", xsrc:"arielbalter:21:4b225a", ysrc:"arielbalter:21:10a1f9", uid:"d0ee8f" }, {
    name:"Col4", type:"scatter", mode:"lines+markers", xsrc:"arielbalter:21:3aee4d", ysrc:"arielbalter:21:6eee6c", uid:"502656" } ], layout:{
    yaxis:{
    type:"linear", range:[
    -737.9094809575623, 13174.640480957562 ], autorange:true, tickmode:"auto", showline:true }, xaxis:{
    type:"date", range:[
    1383440400000, 1434808800000 ], autorange:true }, height:801, width:1616, autosize:true, yaxis2:{
    overlaying:"y", side:"right", anchor:"x", showline:true } } }

  4. 在这里,我使用自动生成的javascript并手动设置为自动调整范围:

    https://jsfiddle.net/abalter/rre2Lma2/

    var trace1 = {
      x: ["2013-12-04 00:00:00.0", "2014-02-10 00:00:00.0", "2014-04-07 00:00:00.0", "2014-06-02 00:00:00.0", "2014-07-21 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-25 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2015-04-27 00:00:00.0", "2015-05-20 00:00:00.0"], 
      y: ["12395", "7367", "211", "400", "5706", "1131", "529", "283", "180", "280", "270", "266", "537", "758", "623", "1346", "1252", "1629", "5890", "6680", "5750"], 
      mode: "lines+markers", 
      name: "Col2", 
      type: "scatter", 
      uid: "d0ee8f", 
      xsrc: "arielbalter:21:4b225a", 
      ysrc: "arielbalter:21:10a1f9"
    };
    var trace2 = {
      x: ["2013-12-04 00:00:00.0", "2013-12-09 00:00:00.0", "2013-12-13 00:00:00.0", "2013-12-14 00:00:00.0", "2013-12-15 00:00:00.0", "2013-12-19 00:00:00.0", "2013-12-20 00:00:00.0", "2013-12-21 00:00:00.0", "2013-12-22 00:00:00.0", "2013-12-30 00:00:00.0", "2014-01-08 00:00:00.0", "2014-01-22 00:00:00.0", "2014-01-22 00:00:00.0", "2014-02-03 00:00:00.0", "2014-02-10 00:00:00.0", "2014-02-18 00:00:00.0", "2014-02-24 00:00:00.0", "2014-03-07 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-17 00:00:00.0", "2014-03-24 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-14 00:00:00.0", "2014-04-21 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-12 00:00:00.0", "2014-05-19 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-09 00:00:00.0", "2014-06-16 00:00:00.0", "2014-07-01 00:00:00.0", "2014-07-07 00:00:00.0", "2014-07-14 00:00:00.0", "2014-07-21 00:00:00.0", "2014-07-28 00:00:00.0", "2014-08-04 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-18 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2014-12-22 00:00:00.0", "2015-01-05 00:00:00.0", "2015-01-07 00:00:00.0", "2015-01-13 00:00:00.0", "2015-02-10 00:00:00.0", "2015-03-02 00:00:00.0", "2015-03-10 00:00:00.0", "2015-03-12 00:00:00.0", "2015-03-31 00:00:00.0", "2015-04-13 00:00:00.0", "2015-04-27 00:00:00.0"], 
      y: ["47.673", "47.628", "46.7", "50", "51.5", "52.4", "49", "49.2", "50.1", "49.85", "48.263", "45.224", "45.723", "45.36", "47", "47.2", "47.4", "47.537", "47.854", "47.8", "48.6", "48.7", "48.671", "48.6", "48.852", "48.4", "49.079", "49.079", "48.9", "49.4", "48.716", "48.716", "49.442", "48.807", "48.852", "48.535", "48.807", "47.6", "48.444", "48.8", "48.127", "48.127", "48.3", "49.125", "48.9", "49.2", "47.945", "47.945", "48.2", "47.9", "47.083", "47.083", "46.9", "46.9", "46.085", "46.085", "45.9", "45.2", "45.088", "44.815", "44.725", "41.731", "42.23", "45.088", "42.593", "43.137", "44.815", "42.956"], 
      mode: "lines+markers", 
      name: "Col4", 
      type: "scatter", 
      uid: "502656", 
      xsrc: "arielbalter:21:3aee4d", 
      ysrc: "arielbalter:21:6eee6c"
    };
    var data = [trace1, trace2];
    var layout = {
      autosize: true, 
      height: 761, 
      width: 1616, 
      xaxis: {
        autorange: true, 
        range: [1.38617155299e+12, 1.43454849026e+12], 
        type: "date"
      }, 
      yaxis: {
        autorange: true, 
        showline: true, 
        tickmode: "auto", 
        type: "linear"
      }, 
      yaxis2: {
        anchor: "x", 
        autorange: true, 
        overlaying: "y", 
        showline: true, 
        side: "right"
      }
    };
    Plotly.plot('plotly-div', data, layout);
    

    https://plot.ly/~arielbalter/23/col2-vs-col4/

1 个答案:

答案 0 :(得分:0)

老问题,但我想我会给它一个答案。数据集需要参考它们要绘制的轴。

看起来引用它们的唯一方法是y1,y2,y3 ......

我在第二个数据集中将“yaxis:'y2'”添加到你的jfiddle中,情节看起来好多了。

https://jsfiddle.net/yjyea8cg/2/

var trace1 = {
  x: ["2013-12-04 00:00:00.0", "2014-02-10 00:00:00.0", "2014-04-07 00:00:00.0", "2014-06-02 00:00:00.0", "2014-07-21 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-25 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2015-04-27 00:00:00.0", "2015-05-20 00:00:00.0"], 
  y: ["12395", "7367", "211", "400", "5706", "1131", "529", "283", "180", "280", "270", "266", "537", "758", "623", "1346", "1252", "1629", "5890", "6680", "5750"], 
  mode: "lines+markers", 
  name: "Col2", 
  type: "scatter", 
  uid: "d0ee8f", 
  xsrc: "arielbalter:21:4b225a", 
  ysrc: "arielbalter:21:10a1f9",
};
var trace2 = {
  x: ["2013-12-04 00:00:00.0", "2013-12-09 00:00:00.0", "2013-12-13 00:00:00.0", "2013-12-14 00:00:00.0", "2013-12-15 00:00:00.0", "2013-12-19 00:00:00.0", "2013-12-20 00:00:00.0", "2013-12-21 00:00:00.0", "2013-12-22 00:00:00.0", "2013-12-30 00:00:00.0", "2014-01-08 00:00:00.0", "2014-01-22 00:00:00.0", "2014-01-22 00:00:00.0", "2014-02-03 00:00:00.0", "2014-02-10 00:00:00.0", "2014-02-18 00:00:00.0", "2014-02-24 00:00:00.0", "2014-03-07 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-17 00:00:00.0", "2014-03-24 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-14 00:00:00.0", "2014-04-21 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-12 00:00:00.0", "2014-05-19 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-09 00:00:00.0", "2014-06-16 00:00:00.0", "2014-07-01 00:00:00.0", "2014-07-07 00:00:00.0", "2014-07-14 00:00:00.0", "2014-07-21 00:00:00.0", "2014-07-28 00:00:00.0", "2014-08-04 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-18 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2014-12-22 00:00:00.0", "2015-01-05 00:00:00.0", "2015-01-07 00:00:00.0", "2015-01-13 00:00:00.0", "2015-02-10 00:00:00.0", "2015-03-02 00:00:00.0", "2015-03-10 00:00:00.0", "2015-03-12 00:00:00.0", "2015-03-31 00:00:00.0", "2015-04-13 00:00:00.0", "2015-04-27 00:00:00.0"], 
  y: ["47.673", "47.628", "46.7", "50", "51.5", "52.4", "49", "49.2", "50.1", "49.85", "48.263", "45.224", "45.723", "45.36", "47", "47.2", "47.4", "47.537", "47.854", "47.8", "48.6", "48.7", "48.671", "48.6", "48.852", "48.4", "49.079", "49.079", "48.9", "49.4", "48.716", "48.716", "49.442", "48.807", "48.852", "48.535", "48.807", "47.6", "48.444", "48.8", "48.127", "48.127", "48.3", "49.125", "48.9", "49.2", "47.945", "47.945", "48.2", "47.9", "47.083", "47.083", "46.9", "46.9", "46.085", "46.085", "45.9", "45.2", "45.088", "44.815", "44.725", "41.731", "42.23", "45.088", "42.593", "43.137", "44.815", "42.956"], 
  mode: "lines+markers", 
  name: "Col4", 
  type: "scatter", 
  uid: "502656", 
  xsrc: "arielbalter:21:3aee4d", 
  ysrc: "arielbalter:21:6eee6c",
  yaxis: 'y2',

};
var data = [trace1, trace2];
var layout = {
  autosize: true, 
  height: 761, 
  width: 1616, 
  xaxis: {
    autorange: true, 
    range: [1.38617155299e+12, 1.43454849026e+12], 
    type: "date"
  }, 
  yaxis: {
    autorange: true, 
    showline: true, 
    tickmode: "auto", 
    type: "linear"
  }, 
  yaxis2: {
    anchor: "x", 
    autorange: true, 
    overlaying: "y", 
    showline: true, 
    side: "right"
  }
};
Plotly.plot('plotly-div', data, layout);