使用Plotly.js绘制两个条形图和两个散点图并共享相同的x轴

Question

我们想使用一个图表来显示每年的度量条形图和同一年的散点图（或线图）。默认情况下，这似乎创建了两次 x 轴标签。

此外，它似乎也通过放置 2016.5（这显然没有意义）在 2016 年和 2017 年之间进行插值。

注意：我们正在使用 angular-plotly

Answer 1

这是 simple example 你所描述的内容。如您所见，只有一个 x 轴标签。

Angular-plotly 也有几乎完全相同的例子 - 只是度量不同，但没有什么能阻止你 x 和 y 在 [=14 的两个元素中相同=]:

import { Component } from '@angular/core';

@Component({
    selector: 'plotly-example',
    template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
})
export class PlotlyExampleComponent {
    public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
    };
}

如果这不是您要查找的内容，请提供您的代码。

编辑：

回答评论，为了避免分数刻度，您可以通过提供如下布局（我也更新了代码笔）将轴刻度限制为 x 值数组：

var trace1 = {
  x: [2000, 2001, 2002, 2003, 2004, 2005],
  y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
  type: 'scatter'
};

var trace2 = {
  x: [2000, 2001, 2002, 2003, 2004, 2005],
  y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
  type: 'bar'
};

var data = [trace1, trace2];

var layout = {
                xaxis:{
                  type: 'dates',
                  tickangle: 0,
                  tickvals: trace1.x
                }            
              };

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

使用Plotly.js绘制两个条形图和两个散点图并共享相同的x轴

Using Plotly.js to draw two bar charts and two scatter plots and share the same x-axis

plotly

plotly.js