Plotly.js 创建堆叠和分组条形图 [英] Plotly.js Create stacked and grouped bar chart
问题描述
如何在 Plotly.js 上使用分组和堆叠条形图创建条形图?我需要这样的结构:
Plotly.newPlot("我的分区",[{x: ["A", "B", "C"],y: [0.3, 0.35, 0.4],类型:酒吧",名称:系列1a",xaxis: 'x1',barmode: '堆栈',标记:{颜色:'#448'}},{x: ["A", "B", "C"],y: [0.6, 0.50, 0.40],类型:酒吧",名称:系列1b",xaxis: 'x1',条形模式:'堆栈',标记:{颜色:'#88C'}},{x: ["A", "B", "C"],y: [0.1, 0.15, 0.20],类型:酒吧",名称:系列1c",xaxis: 'x1',barmode: '堆栈',标记:{颜色:'#CCF'}},{x: ["A", "B", "C"],y: [0.3, 0.35, 0.4],类型:酒吧",名称:系列2a",xaxis: 'x2',条形模式:'堆栈',标记:{颜色:'#080'}},{x: ["A", "B", "C"],y: [0.25, 0.15, 0.05],类型:酒吧",名称:系列2b",xaxis: 'x2',barmode: 'stack', 标记: {color: '#8c8'}},{x: ["A", "B", "C"],y: [0.45, 0.50, 0.55],类型:酒吧",名称:系列2c",xaxis: 'x2',barmode: 'stack', 标记: {color: '#CFC'}},{x: ["A", "B", "C"],y: [0.3, 0.35, 0.4],类型:酒吧",名称:系列3a",xaxis: 'x3',barmode: 'stack', 标记: {color: '#880'}},{x: ["A", "B", "C"],y: [0.6, 0.50, 0.40],类型:酒吧",名称:系列3b",xaxis: 'x3',barmode:'堆栈',标记:{颜色:'#CC8'}},{x: ["A", "B", "C"],y: [0.1, 0.15, 0.20],类型:酒吧",名称:3c系列",xaxis: 'x3',条形模式:'堆栈',标记:{颜色:'#FFC'}},],{条形模式:堆栈",yaxis: {tickformat: '%'},x轴:{域:[0, 0.33],锚点:'x1',书名:《苹果》},xaxis2:{域:[0.33, 0.66],锚点:'x2',标题:'梨'},xaxis3:{域:[0.67, 1.0],锚点:'x3',标题:'樱桃'}});
How to create barchart on Plotly.js with grouped and stacked bars? I need structure like that: Barchart with stacked and grouped charts
It is possible to create a grouped-and-stacked bar chart in Plotly.js by creating each group as a subplot. It's not as simple as setting a top-level feature like 'barmode': 'stacked+grouped' but because it's more elemental it offers more options.
See https://community.plot.ly/t/combination-of-grouped-and-stacked-bar-chart/2154
Here each subplot references a shared common yaxis and its own xaxis. Each xaxis gets a "domain" which here means a portion of the overall bottom axis width. Here the first group gets [0.0, 0.33], the second [0.34, 0.66] and the third [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'
}
}
);
这篇关于Plotly.js 创建堆叠和分组条形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!