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

6ojccjat  于 2023-10-14  发布在  Java
关注(0)|答案(1)|浏览(107)

enter image description here
我怎么能改变方向垂直和改变位置的modebar到右边的图表一样的形象?我应该在布局和配置中编辑什么?

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);
qxsslcnc

qxsslcnc1#

有关方向,请参见layout.modebar.orientation

const layout = {
  // ...

  modebar: {
    orientation: 'v'
  }
};

对于位置,您可以覆盖modebar容器样式,默认情况下为position: absolute; top: 0px;(nb.默认值内联应用)。基本上,您需要根据布局上边距(默认值:100px):

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

相关问题