Plotly.js 创建堆叠和分组条形图

Question

如何在 Plotly.js 上创建带有分组和堆叠条形图的条形图？我需要这样的结构： Barchart with stacked and grouped charts

Answer 1

通过将每个组创建为子图，可以在 Plotly.js 中创建分组堆叠条形图。它不像设置像 'barmode' 这样的顶级功能那么简单：'stacked+grouped' 但因为它更基本，所以它提供了更多选项。

参见 https://community.plot.ly/t/combination-of-grouped-and-stacked-bar-chart/2154

这里每个子图都引用一个共享的公共 yaxis 和它自己的 xaxis。每个 xaxis 都有一个 "domain" ，这里表示整个底轴宽度的一部分。这里第一组得到 [0.0, 0.33]，第二组得到 [0.34, 0.66]，第三组得到 [0.67, 1.0]

   Plotly.newPlot(
  "myDiv",
  [
    {
      x: ["A", "B", "C"],
      y: [0.3, 0.35, 0.4],
      type: "bar",
      name: "series 1a", 
      xaxis: 'x1',
      barmode: 'stack', 
      marker: {color: '#448'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.6, 0.50, 0.40],
      type: "bar",
      name: "series 1b", 
      xaxis: 'x1',
      barmode: 'stack', marker: {color: '#88C'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.1, 0.15, 0.20],
      type: "bar",
      name: "series 1c", 
      xaxis: 'x1',
      barmode: 'stack', 
      marker: {color: '#CCF'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.3, 0.35, 0.4],
      type: "bar",
      name: "series 2a",
      xaxis: 'x2',     
      barmode: 'stack', marker: {color: '#080'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.25, 0.15, 0.05],
      type: "bar",
      name: "series 2b",
      xaxis: 'x2',     
      barmode: 'stack', marker: {color: '#8c8'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.45, 0.50, 0.55],
      type: "bar",
      name: "series 2c", 
      xaxis: 'x2',
      barmode: 'stack', marker: {color: '#CFC'}
    },
     {
      x: ["A", "B", "C"],
      y: [0.3, 0.35, 0.4],
      type: "bar",
      name: "series 3a", 
      xaxis: 'x3',
      barmode: 'stack', marker: {color: '#880'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.6, 0.50, 0.40],
      type: "bar",
      name: "series 3b", 
      xaxis: 'x3',
      barmode: 'stack', marker: {color: '#CC8'}
    },
    {
      x: ["A", "B", "C"],
      y: [0.1, 0.15, 0.20],
      type: "bar",
      name: "series 3c", 
      xaxis: 'x3',
      barmode: 'stack', marker: {color: '#FFC'}
    },
  ],
  {
    barmode: "stack",
    yaxis: {tickformat: '%'},
    xaxis: {
      domain: [0, 0.33],
      anchor: 'x1', 
      title: 'Apples'
    },
    xaxis2: {
      domain: [0.33, 0.66],
      anchor: 'x2', title: 'Pears'
    },
    xaxis3: {
      domain: [0.67, 1.0],
      anchor: 'x3', title: 'Cherries'
    }
  }
);

Answer 2

截至 2021 年的较新答案 Plotly.js 现在允许嵌套分类轴，而无需创建具有专用轴的子图（参见 https://plotly.com/python/categorical-axes/）

以上图表有

Plotly.newPlot(
  "myDiv",
  [
    {
      x: [
        ["Apples","Apples","Apples","Pears","Pears","Pears","Dates","Dates","Dates"],
        ["East", "South","West","East", "South","West","East", "South","West"]
      ],
      y: [0.3, 0.35, 0.4,0.3, 0.35, 0.4,0.3, 0.35, 0.4],
      type: "bar",
      name: "Snack", 
      marker: {color: '#448'}
    },
    {
      x: [
        ["Apples","Apples","Apples","Pears","Pears","Pears","Dates","Dates","Dates"],
        ["East", "South","West","East", "South","West","East", "South","West"]
      ],
      y: [0.6, 0.50, 0.40,0.25, 0.15, 0.05,0.6, 0.50, 0.40],
      type: "bar",
      name: "Ingredient", 
      marker: {color: '#88C'}
    },
    {
      x: [
        ["Apples","Apples","Apples","Pears","Pears","Pears","Dates","Dates","Dates"],
        ["East", "South","West","East", "South","West","East", "South","West"]
      ],
      y: [0.1, 0.15, 0.20,0.45, 0.50, 0.55,0.1, 0.15, 0.20],
      type: "bar",
      name: "Garnish", 
      marker: {color: '#CCF'}
    }
  ],
  {
    barmode: "stack",
    yaxis: {tickformat: '%'},
    xaxis: {
      type: 'multicategory', 
      title: 'Fruit'
    },
    yaxis: {
      type: '', 
      range: [0,1],
      tickformat: "0.0%"
    }
  }
);

Plotly.js 创建堆叠和分组条形图

Plotly.js Create stacked and grouped bar chart

javascript

plotly

plotly.js