Question

我想使用plotly.js在同一图中绘制2个图。我已经浏览了plotly.js的文档，但无法找到它。任何人都可以帮忙吗？

以下是代码段：

第一个情节：

    var data4 = [ {
        z: z,
        x: x,
        y: y,
        type: 'contour'
    }
];

var layout = {
  title: 'Simple Contour Plot'
}

Plotly.newPlot('visualization2', data4, layout);

第二个情节：

 var trace = {
  x: x11,
  y: x21,
  mode: 'lines+markers'
};

var data3 = [ trace];

 var layout = {
  title:'Line and Scatter Plot',
  height: 400,
  width: 480
 };

Plotly.newPlot('visualization3', data3, layout);

我想在一个图中绘制这两个。注意：第一个是等高线图，第二个是线图。

Answer 1

您可以将大量迹线添加到您想要绘制的数据中，并绘制它们。

每个图表也只能有1个标题，但是，您可以拥有多个轴标题。

var firstPlotTrace = {
    z: z,
    x: x,
    y: y,
    type: 'contour'
    name: 'yaxis data'
};

var secondPlotTrace = {
    x: x11,
    y: x21,
    mode: 'lines+markers'
    name: 'yaxis2 data'
};

var plotData = [firstPlotTrace, secondPlotTrace];

var layout = {
    title: 'Double Plot Title',
    height: 400,
    width: 400,
    yaxis: {title: 'Simple Contour Plot Axis', range: [-20, 20]}
    yaxis2: {title: 'Line and Scatter Plot Axis', range: [-20, 20]}
};

Plotly.newPlot('plotDiv', plotData, layout);

HTML -

<div id="plotDiv" style="height: 400px; width: 400px;"></div>

如何在plotly.js中绘制同一图中的两个图

1 个答案: