Bootstrap卡中的响应PlotlyJS图表

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="chartContainer"></div>

<script>
  // 获取容器元素
  var chartContainer = document.getElementById('chartContainer');

  // 创建图表数据
  var data = [{
    x: [1, 2, 3, 4, 5],
    y: [1, 4, 9, 16, 25],
    type: 'scatter'
  }];

  // 创建图表布局
  var layout = {
    title: 'PlotlyJS Chart',
    xaxis: {
      title: 'X轴'
    },
    yaxis: {
      title: 'Y轴'
    }
  };

  // 绘制图表
  Plotly.newPlot(chartContainer, data, layout);
</script>