Plotly.js 多个子图未按预期工作

Question

编辑添加：寻找 "plotly.js" 方法来做到这一点。此 "small multiple" 可视化应该有一些 "plotly.js" 解决方案，但尚未找到。

我正在使用数组（下面的示例元素）为 plotly.js 多个子图填充 traces 每个 multiple-subplots example

[{
    "key": "Ontario|Toronto",
    "values": [{
        "key": "2020-01-25",
        "value": 1
    }, {
        "key": "2020-01-27",
        "value": 1
    }, {
        "key": "2020-05-12",
        "value": 218
    }, {
        "key": "2020-05-13",
        "value": 169
    }]
}, { 
    etc
}]

该数组有 94 个元素，其中包含创建每个跟踪所需的信息。这将产生 94 个子图，每个轨迹一个。这个 plotly.js 可视化也可以称为 "small multiples"。

我正在使用以下代码动态创建 traces 并在循环中填充子图定义：

// create chart data
var traces = [];
var rowCount = (caseRegionByDate.length / 2).toFixed()

for (var i=0; i<caseRegionByDate.length; i++) {
    //console.log(caseRegionByDate[i]['key']);
    var trace = {};
    var x = [];
    var y = [];
    for (var j=0; j<caseRegionByDate[i]['values'].length; j++) {
        //console.log(caseRegionByDate[i]['values'][j]['key']);
        x.push(caseRegionByDate[i]['values'][j]['key']);
        y.push(caseRegionByDate[i]['values'][j]['value']);
    }
    // create trace i
    trace = {
    "x":x,
    "y":y,
    "xaxis":"x"+i,
    "yaxis":"y"+i,
    "type":"scatter"
    }
    // push trace to traces
    traces.push(trace);
}
console.log(JSON.stringify(traces));

var layout = {
    grid: {rows: rowCount, columns: 2, pattern: 'independent'},
    };

Plotly.newPlot('multiple_charts', traces, layout);

这会创建 traces 变量，该变量由每个跟踪填充，如下例所示。看起来正确：

[{
    "x": ["2020-03-16", "2020-03-23", "2020-03-24", "2020-03-25", "2020-03-31", "2020-04-01", "2020-04-02", "2020-04-03", "2020-04-06", "2020-04-07", "2020-04-08", "2020-04-09", "2020-04-10", "2020-04-11", "2020-04-13", "2020-04-14", "2020-04-15", "2020-04-16", "2020-04-17", "2020-04-18", "2020-04-21", "2020-04-22", "2020-04-23", "2020-04-24", "2020-04-25", "2020-04-26", "2020-04-27", "2020-04-28", "2020-04-29", "2020-04-30", "2020-05-01", "2020-05-02", "2020-05-03", "2020-05-04", "2020-05-05", "2020-05-06", "2020-05-07", "2020-05-08", "2020-05-09", "2020-05-10", "2020-05-11", "2020-05-12", "2020-05-13"],
    "y": [1, 1, 1, 1, 9, 35, 3, 16, 33, 13, 9, 5, 5, 1, 22, 3, 4, 7, 19, 4, 7, 2, 18, 11, 9, 9, 9, 13, 1, 3, 7, 18, 5, 4, 4, 5, 3, 1, 2, 2, 3, 1, 2],
    "xaxis": "x0",
    "yaxis": "y0",
    "type": "scatter"
}, {
    "x": ["2020-03-14", "2020-03-26", "2020-03-27", "2020-04-02", "2020-04-06", "2020-04-09", "2020-04-14", "2020-04-17", "2020-04-18", "2020-04-20", "2020-04-22"],
    "y": [1, 1, 1, 2, 2, 3, 1, 1, 1, 2, 1],
    "xaxis": "x1",
    "yaxis": "y1",
    "type": "scatter"
},
    etc
]

但是，结果似乎是一行两列，所有的轨迹（有 94 条轨迹）都被压扁了。这是截图。

知道发生了什么事吗？我希望有 48 行 2 列，每个跟踪一个子图。

与多个子图示例的唯一区别是我的 x 轴有日期字符串而不是数字。其他都一样。

Answer 1

子图实际上是在 3 x rowCount 网格中创建的。但是，如屏幕截图所示，它们都被垂直压扁。

似乎图表的默认高度和宽度尺寸（未使用 layout.height 明确定义）是我的屏幕截图中显示的，例如对于 94 个子图来说太小了。

快速解决方法是简单地增加图表的 layout.height 大小。然后所有子图都是可见的。根据 Juan 的建议动态计算 layout.height，相对于行数效果很好。

显然，还可以设置每个子图的 x 和 y 域属性来调整子图的大小，这也将提供所需的结果。

Plotly.js 多个子图未按预期工作

Plotly.js multiple subplots not working as expected

javascript

plotly.js