我有两组独立的x-y数据。 x值都是公共范围内的日期(但不同的特定点)。 y值适用于具有不同范围的完全不同的数据。
左侧y数据是自动缩放的,因此它最大程度地使用[0,1]域。右手数据不是
我在GUI中为两个y轴选择了自动缩放。左轴仍然为gui和JSON中显示的数据提供了一些奇怪的范围,尽管JSON确实有autorange = true。
右轴未在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
}
}
}
在这里,我使用自动生成的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);
答案 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);