如果不使用子图，Plotly js 将不会在 HTML 中显示多个图

Question

我想在 HTML 页面上用 Plotly 绘制两个不同的图，但只有一个会显示。

我尝试根据我发现的 this codepen.io 制作 Plotly.js 绘图，但它无法正确显示多个绘图。我有两个 CSV URLs。如果我注释掉一个 URL 的代码，另一个就会正常显示。但是，如果我同时包含这两个代码，则只会显示一个而另一个是空白的。是否有我遗漏的特定代码可以使 HTML 站点中存在多个地块？我不想使用子图。

部分代码：

// Place urls for cvs files here
var url1 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS04-ET.csv';
var x1SeriesName = 'datetime';
var y1SeriesName = 'ET';
var y1NameToBeDisplayed = 'ET';
var y1Mode = 'lines';


var url2 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS04-ndvi.csv';
var x2SeriesName = 'datetime';
var y2SeriesName = 'NDVI';
var y2NameToBeDisplayed = 'NDVI';
var y2Mode = 'lines';


//URL1
function makeplot() {
  Plotly.d3.csv(url1, function(data){ processData(data,x1SeriesName,y1SeriesName,y1NameToBeDisplayed) } );
};

function processData(allRows,xLabel,yLabel,yTraceName) {

  console.log(allRows.length);
  var x = [], y = [];

  for (var i=0; i<allRows.length; i++) {
    row = allRows[i];
 
    x.push(row[xLabel]);
    y.push(row[yLabel]);
    if(i === 0) {
      console.log(i);
      console.log(row);
    }
  }
  makePlotly( x, y,  yTraceName);
}

function makePlotly( x, y, yTraceName){
  var traces = [{
    x: x,
    y: y,
    name: yTraceName
  }];

  Plotly.newPlot(myDiv1, traces,layout,options);
};

makeplot();

//instruction resizes plot
window.onresize = function() {
  Plotly.Plots.resize(my_Div);
};




//URL2
function makeplot() {
  Plotly.d3.csv(url2, function(data){ processData(data,x2SeriesName,y2SeriesName,y2NameToBeDisplayed) } );
};

function processData(allRows,xLabel,yLabel,yTraceName) {

  console.log(allRows.length);
  var x = [], y = [];

  for (var i=0; i<allRows.length; i++) {
    row = allRows[i];
 
    x.push(row[xLabel]);
    y.push(row[yLabel]);
    if(i === 0) {
      console.log(i);
      console.log(row);
    }
  }
  makePlotly( x, y,  yTraceName);
}

function makePlotly( x, y, yTraceName){
  var traces = [{
    x: x,
    y: y,
    name: yTraceName
  }];

  Plotly.newPlot(myDiv1, traces,layout,options);
};

makeplot();

//instruction resizes plot
window.onresize = function() {
  Plotly.Plots.resize(my_Div);
};

可以找到包括 HTML 和布局代码在内的完整代码 here。

Answer 1

我认为您可以在代码中清理一些东西。最好通过添加更多参数来重用函数，而不是将同一个函数重新定义两次（并且必须将数据和 div 标记硬编码到每个函数定义中）

我重组了您的代码，以便 makeplot 函数绘制来自 url1 和 url2 的数据，并添加了一个额外的 divName 参数，以便您可以重复使用processData 和 makePlotly 函数。

你可以找到 jsfiddle here

// Place urls for cvs files here
var url1 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS04-ET.csv';
var x1SeriesName = 'datetime';
var y1SeriesName = 'ET';
var y1NameToBeDisplayed = 'ET';
var y1Mode = 'lines';


var url2 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS04-ndvi.csv';
var x2SeriesName = 'datetime';
var y2SeriesName = 'NDVI';
var y2NameToBeDisplayed = 'NDVI';
var y2Mode = 'lines';


//var url3 = 'XXXX';
//var url4 = 'XXXX';
//var url5 = 'XXXX';


// Section deals with buttons for time range selection
var selectorOptions = {
  buttons: [{
    step: 'month',
    stepmode: 'backward',
    count: 1,
    label: '1m'
  }, {
    step: 'month',
    stepmode: 'backward',
    count: 6,
    label: '6m'
  }, {
    step: 'year',
    stepmode: 'todate',
    count: 1,
    label: 'YTD'
  }, {
    step: 'year',
    stepmode: 'backward',
    count: 1,
    label: '1y'
  }, {
    step: 'all',
  }],
};

// set layout down here
var layout = {
  xaxis: {
    rangeselector: selectorOptions,
    rangeslider: {}
  },
  yaxis: {
    fixedrange: true,
    side: 'right'
  },
  showlegend: false
};

// set display options
var options ={
  showLink: false,
  displayModeBar: false
};

// Next piece of code deals with responsiveness
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 100,
  HEIGHT_IN_PERCENT_OF_PARENT = 97;

var gd3_div1 = d3.select("div[id='myDiv1']")
  .style({
    width: WIDTH_IN_PERCENT_OF_PARENT + '%',
    'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
    height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
    'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
  });
  
var gd3_div2 = d3.select("div[id='myDiv2']")
  .style({
    width: WIDTH_IN_PERCENT_OF_PARENT + '%',
    'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
    height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
    'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
  });

var my_Div1 = gd3_div1.node();
var my_Div2 = gd3_div2.node();


//URL1 and URL2
function makeplot() {
  Plotly.d3.csv(url1, function(data){ processData(data,x1SeriesName,y1SeriesName,y1NameToBeDisplayed, "myDiv1") } );
  Plotly.d3.csv(url2, function(data){ processData(data,x2SeriesName,y2SeriesName,y2NameToBeDisplayed, "myDiv2") } );
};

function processData(allRows,xLabel,yLabel,yTraceName, divName) {

  console.log(allRows.length);
  var x = [], y = [];

  for (var i=0; i<allRows.length; i++) {
    row = allRows[i];
 
    x.push(row[xLabel]);
    y.push(row[yLabel]);
    if(i === 0) {
      console.log(i);
      console.log(row);
    }
  }
  makePlotly( x, y,  yTraceName, divName);
}

function makePlotly( x, y, yTraceName, divName){
  var traces = [{
    x: x,
    y: y,
    name: yTraceName
  }];

  Plotly.newPlot(divName,traces,layout,options);
};

makeplot();

//instruction resizes plot
window.onresize = function() {
  Plotly.Plots.resize(my_Div1);
  Plotly.Plots.resize(my_Div2);
};

如果不使用子图，Plotly js 将不会在 HTML 中显示多个图

Plotly js will not display more than one plot in HTML without using subplot

html

javascript

plotly

plotly.js