Plotly - Javascript：對條形圖寬度固定的條形圖進行分組

Question

我在另一個條形圖上有一個條形圖。 第一個是堆積條形圖，第二個是分組條形圖。 對於分組條形圖，我設置了寬度，但現在條形之間有一些空間。 我想要一組中的酒吧彼此相鄰。 我怎樣才能做到這一點？

https://codepen.io/asdfaaaasdf/pen/WNEYYyB

var data = [
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [120, 120, 120, 120],
        name: 'Example 1',
        type: 'bar',
        hoverinfo: 'none',
        showlegend: false,
        offsetgroup: 1,
        marker: {
          color: 'red',
          opacity: 0.8,
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [80, 0, 90, 95],
        name: 'Example 1',
        type: 'bar',
        hoverinfo: 'none',
        showlegend: false,
        offsetgroup: 1,
        marker: {
          color: 'yellow',
          opacity: 0.8,
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [50, 70, 60, 55],
        name: 'Example 1',
        type: 'bar',
        hoverinfo: 'none',
        showlegend: false,
        offsetgroup: 1,
        marker: {
          color: 'green',
          opacity: 0.8,
        },
      },
      // bar values
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [65, 110, 55, 45],
        name: 'Example 1',
        xaxis: 'x2',
        type: 'bar',
        width: 0.2,
        marker: {
          color: 'rgb(165, 5, 45)',
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [85, 65, 70, 50],
        name: 'Example 2',
        xaxis: 'x2',
        type: 'bar',
        width: 0.2,
        marker: {
          color: 'rgb(0, 155, 140)',
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [75, 75, 90, 70],
        name: 'Example 2',
        xaxis: 'x2',
        type: 'bar',
        width: 0.2,
        marker: {
          color: 'lightblue',
        },
      },
    ];

const layout = {
      title: 'multiple y-axes example',
      yaxis: {
        range: [0, 120],
      },
      xaxis: {
        title: 'yaxis title',
        showticklabels: false,
        visible: false,
      },
      xaxis2: {
        title: 'x-axis title',
        titlefont: { color: '#ff7f0e' },
        tickfont: { color: '#ff7f0e' },
        anchor: 'free',
        overlaying: 'x',
        barmode: 'group',
      },
    }

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

Answer 1

https://codepen.io/asdfaaaasdf/pen/NWveKYw

我們需要為不同的軌跡設置偏移量，如下所示：

var data = [
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [120, 120, 120, 120],
        name: 'Example 1',
        type: 'bar',
        hoverinfo: 'none',
        showlegend: false,
        offsetgroup: 1,
        marker: {
          color: 'red',
          opacity: 0.8,
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [80, 0, 90, 95],
        name: 'Example 1',
        type: 'bar',
        hoverinfo: 'none',
        showlegend: false,
        offsetgroup: 1,
        marker: {
          color: 'yellow',
          opacity: 0.8,
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [50, 70, 60, 55],
        name: 'Example 1',
        type: 'bar',
        hoverinfo: 'none',
        showlegend: false,
        offsetgroup: 1,
        marker: {
          color: 'green',
          opacity: 0.8,
        },
      },
      // bar values
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [65, 110, 55, 45],
        name: 'Example 1',
        xaxis: 'x2',
        type: 'bar',
        width: 0.2,
        offset: [-0.3, -0.3, -0.3, -0.3],
        marker: {
          color: 'rgb(165, 5, 45)',
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [85, 65, 70, 50],
        name: 'Example 2',
        xaxis: 'x2',
        type: 'bar',
        width: 0.2,
        offset: [-0.1, -0.1, -0.1, -0.1],
        marker: {
          color: 'rgb(0, 155, 140)',
        },
      },
      {
        x: ['apple', 'orange', 'banana', 'grapes'],
        y: [75, 75, 90, 70],
        name: 'Example 2',
        xaxis: 'x2',
        type: 'bar',
        width: 0.2,
        offset: [0.1, 0.1, 0.1, 0.1],
        marker: {
          color: 'lightblue',
        },
      },
    ];

const layout = {
      title: 'multiple y-axes example',
      yaxis: {
        range: [0, 120],
      },
      xaxis: {
        title: 'yaxis title',
        showticklabels: false,
        visible: false,
      },
      xaxis2: {
        title: 'x-axis title',
        titlefont: { color: '#ff7f0e' },
        tickfont: { color: '#ff7f0e' },
        anchor: 'free',
        overlaying: 'x',
        barmode: 'group',
      },
    }

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