Plotly.js 模式栏将图标分组并将其放置在图例上

Question

这是我 problem 的照片。如您所见，我的模式栏显示为一组图标，并将其放置在图例上。我只是使用示例数据从他们的站点复制并粘贴了一些示例代码。我没有其他 css 影响这个。下面是我正在使用的代码块。

类似的 post 显示了它应该是什么样子，它们都在一行中并且不在图例中。

如何使我的模式栏看起来像第二个 link？

<div id="myDiv"></div>

<script>
    var trace1 = {
        x: [0, 1, 2],
        y: [10, 11, 12],
        type: 'scatter'
    };

    var trace2 = {
        x: [2, 3, 4],
        y: [100, 110, 120],
        yaxis: 'y2',
        type: 'scatter'
    };

    var trace3 = {
        x: [3, 4, 5],
        y: [1000, 1100, 1200],
        yaxis: 'y3',
        type: 'scatter'
    };

    var data = [trace1, trace2, trace3];

    var layout = {
        yaxis: {domain: [0, 0.33]},
        legend: {traceorder: 'reversed'},
        yaxis2: {domain: [0.33, 0.66]},
        yaxis3: {domain: [0.66, 1]}
    };

    Plotly.newPlot('myDiv', data, layout, {displaylogo: false});
</script>

Answer 1

官方"answer"接受：这通常是由于外部CSS。

Plotly.js 模式栏将图标分组并将其放置在图例上

Plotly.js modebar groups icons and places it over legend

html

javascript

css

plotly

plotly.js