javascript - Plotly.js 图没有响应

在使用 Plotly.js 创建堆栈条形图后，我注意到它不会响应不同的屏幕宽度。如何使图形响应于自动调整大小以适应屏幕宽度？

我尝试使用以下方法，但没有用:

window.onresize = function() {
    Plotly.Plots.resize('myDiv');
};

var trace1 = {
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
    y: [20, 14, 23, 20, 14, 23, 34, 26],
    marker: {
        color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)']
    },
    name: 'Item 1',
    type: 'bar'
};

var trace2 = {
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
    y: [12, 18, 29, 12, 18, 29, 24, 22],
    marker: {
        color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)']
    },
    name: 'Item 2',
    type: 'bar'
};

var trace3 = {
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
    y: [12, 18, 29, 12, 18, 29, 24, 22],
    marker: {
        color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)']
    },
    name: 'Item 3',
    type: 'bar'
};

var data = [trace1, trace2, trace3];

var layout = {
    barmode: 'stack'
};

Plotly.newPlot('myDiv', data, layout);

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv"></div>
</body>

最佳答案

只需在布局中将自动调整大小设置为 True，然后通过重新布局方法将 x 轴和 y 轴设置为自动调整范围。即

var trace1 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [20, 14, 23, 20, 14, 23, 34, 26],
  marker: {
    color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)']
  },
  name: 'Item 1',
  type: 'bar'
};

var trace2 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [12, 18, 29, 12, 18, 29, 24, 22],
  marker: {
    color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)']
  },
  name: 'Item 2',
  type: 'bar'
};

var trace3 = {
  x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
  y: [12, 18, 29, 12, 18, 29, 24, 22],
  marker: {
    color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)']
  },
  name: 'Item 3',
  type: 'bar'
};

var data = [trace1, trace2, trace3];

var layout = {
  barmode: 'stack',
  autosize: true // set autosize to rescale
};

Plotly.newPlot('myDiv', data, layout);

// update the layout to expand to the available size
// when the window is resized
window.onresize = function() {
    Plotly.relayout('myDiv', {
        'xaxis.autorange': true,
        'yaxis.autorange': true
    });
};

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

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

关于javascript - Plotly.js 图没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47117803/

javascript - Plotly.js 图没有响应

上一篇：javascript - 单击子元素时会触发父元素事件

下一篇：html - 在文本悬停CSS上旋转图像