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

Question

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

此外，它似乎也会在2016年至2017年之间插入2016.5（这显然没有意义）。

注意：我们使用的是角度图

Answer 1

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

Angular-plotly也具有几乎完全相同的示例-只是度量有所不同，但是没有什么可以阻止x的两个元素中的y和data相同：

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);