多个X轴 [英] Multiple X-Axes in Plotly

问题描述

我目前正在尝试绘制两组不同的数据，以为我们正在处理的数据创建可视化效果.

基本上，一组数据将是一条河流的横截面(宽度，深度).

另一组数据包括水位和记录这些水位的时间. (深度，时间)

我目前正在个别图表中绘制每个图表，但需要使该图表将水位数据叠加到横截面数据上.由于范围不同，因此将需要多个X轴.这在情节上有可能吗?我已经在线观看了使用Plotly的数据编辑器的视频，但是在使用他们的API方面并没有发现太多.

此外，我知道一组数据以米为单位，另一组数据以英尺为单位-以这些数据为例，最终结果都以英尺为单位显示.

解决方案

@emackey答案不会产生多个x轴.这是一种有效的语法，在同一张图上显示两个不同的数据集，其中一个y轴和两个x轴.

var trace1 = {
      x: [1, 2, 3], 
      y: [40, 50, 60], 
      name: 'yaxis data', 
      type: 'scatter'
};

var trace2 = {
      x: [12, 13, 14], 
      y: [4, 5, 6], 
      name: 'yaxis2 data', 
      xaxis: 'x2', 
      type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
      yaxis: {title: 'yaxis title'}, 
      xaxis2: {
            title: 'xaxis2 title', 
            titlefont: {color: 'rgb(148, 103, 189)'}, 
            tickfont: {color: 'rgb(148, 103, 189)'}, 
            overlaying: 'x', 
            side: 'top'
      }
};

Plotly.newPlot('myDiv', data, layout);

这将产生以下图形.该链接将帮助您获取进一步的文档. /p>

I'm currently trying to plot two different sets of data to create a visualization for the data we are processing.

Essentially, one set of data will be a cross-section of a river (width, depth).

The other set of data consists of water levels and the times those levels were recorded. (depth, time)

I'm currently plotting each in individual graphs, but need to make the plot overlay the water level data onto the cross-section data. This would require multiple X-Axes since the range is not the same. Is this possible in plotly? I've seen a video online of someone using Plotly's data editor, but haven't found much in terms of using their API.

Also, I know that one set of data is in meters, the other is in feet -- these data are being used as an example, the final result will both be displayed in feet.

解决方案

@emackey answer does not produce multiple x-axes. This is a working syntax that shows two different dataset on a same graph with one y axis and two x-axes.

var trace1 = {
      x: [1, 2, 3], 
      y: [40, 50, 60], 
      name: 'yaxis data', 
      type: 'scatter'
};

var trace2 = {
      x: [12, 13, 14], 
      y: [4, 5, 6], 
      name: 'yaxis2 data', 
      xaxis: 'x2', 
      type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
      yaxis: {title: 'yaxis title'}, 
      xaxis2: {
            title: 'xaxis2 title', 
            titlefont: {color: 'rgb(148, 103, 189)'}, 
            tickfont: {color: 'rgb(148, 103, 189)'}, 
            overlaying: 'x', 
            side: 'top'
      }
};

Plotly.newPlot('myDiv', data, layout);

This will produce the following graph.This link will help you for further documentation.

这篇关于多个X轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！