Как поместить гистограммы в подзаговоры на графике js - PullRequest
Новая
       43

Как поместить гистограммы в подзаговоры на графике js

0 голосов
/ 17 марта 2020

Я создал 2 гистограммы в виде графиков js, как показано ниже

// график 1 

var trace1 = {
  x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
  y: [16/48, 20/84, 1/41],
  name: '1',
  type: 'bar'
};
var trace2 = {
  x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
  y: [30/48, 54/84, 37/41],
  name: '4',
  type: 'bar'
};
var trace3 = {
  x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
  y: [2/48, 10/84, 3/41],
  name: '6',
  type: 'bar'
};
var data = [trace1, trace2, trace3];
var layout = {barmode: 'stack', yaxis: {title: 'var2'}};
Plotly.newPlot('myDiv', data, layout);

// график 2 

var trace1 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [0/48, 29/84, 33/41],
    name: '0',
    type: 'bar'
};
var trace2 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [0/48, 11/84, 5/41],
    name: '1',
    type: 'bar'
};
var trace3 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [0/48, 9/84, 0/41],
    name: '2',
    type: 'bar'
};
var trace4 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [0/48, 17/84, 2/41],
    name: '3',
    type: 'bar'
};
var trace5 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [0/48, 18/84, 1/41],
    name: '4',
    type: 'bar'
};
var trace6 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [15/48, 0/84, 0],
    name: '5',
    type: 'bar'
};
var trace7 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [13/48, 0/84, 0/41],
    name: '6',
    type: 'bar'
};
var trace8 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [4/48, 0, 0/41],
    name: '7',
    type: 'bar'
};
var trace9 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [6/48, 0/84, 0],
    name: '8',
    type: 'bar'
};
var trace10 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [3/48, 0/84, 0],
    name: '9',
    type: 'bar'
};
var trace11 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [3/48, 1084, 0/41],
    name: '10',
    type: 'bar'
};
var trace12 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [1/48, 0, 0/41],
    name: '11',
    type: 'bar'
};
var trace13 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [1/48, 0/84, 0],
    name: '12',
    type: 'bar'
};
var trace14 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [1/48, 0/84, 0],
    name: '14',
    type: 'bar'
};
var trace15 = {
    x: ['c0, size: 48', 'c1, size: 84', 'c2, size: 41'],
    y: [1/48, 0/84, 0/41],
    name: '15',
    type: 'bar'
};
var data = [trace1, trace2, trace3, trace4,
    trace5, trace6, trace7, trace8,
    trace9, trace10, trace11, trace12,
    trace13, trace14, trace15];
var layout = {barmode: 'stack', yaxis: {title: 'var1'}};
Plotly.newPlot('myDiv', data, layout);

Теперь я Я хочу поместить эти две диаграммы в подзаговоры, где каждый график представлен в виде строки одного и того же столбца.

Я попытался использовать разные оси Yaxis и перечислить имена осей в сетке: объект subplots, но стекирование, похоже, не удерживает и с другими опциями, доступными в сюжетных документах, похоже, проблема та же.

Я не совсем уверен, как этого добиться, так как я новичок в js. Любая помощь будет оценена, спасибо!

...