如何更改模式栏 PlotlyJS 的方向和位置

Question

如何将方向更改为垂直并将模式栏的位置更改为图表右侧，如图所示？我应该在布局和配置中编辑什么？

 let layout = {
    xaxis: {
        title: 'Date',
        tickfont: {
            size: 10,
        },
    },
    yaxis: {
        title: '価格 ($)',
        tickfont: {
            size: 10,
        },
        range: [minValue, maxValue],
    },
    legend: {
        x: -0.05,
        y: 1.2,
        itemwidth: 30,
        traceorder: 'normal',
        orientation: 'h',
        font: {
            size: 12,
            color: '#000',
        },
    },
};

let config = {
    responsive: true,
    scrollZoom: true,
    displaylogo: false,
};

Plotly.newPlot('model_graph', all_traces, layout, config);

Answer 1

有关方向，请参阅

layout.modebar.orientation

：

const layout = {
  // ...

  modebar: {
    orientation: 'v'
  }
};

对于位置，您可以覆盖模式栏容器样式，默认情况下具有

position: absolute; top: 0px;

（注意。默认值内联应用）。基本上，您需要根据

布局上边距

增加top（默认：100px）：

.modebar-container {
  top: 100px !important;
}

在codepen上尝试一下