求助：使用Plotly JS在单页面绘制4个含多Y轴的图表

下面是可直接运行的代码示例，实现单页面内4个带多Y轴的图表，包含双Y轴、三Y轴的不同图表类型：

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Plotly Multi-Y Axis Charts</title>
    <style>
        .chart-container {
            width: 48%;
            height: 400px;
            display: inline-block;
            margin: 1%;
        }
    </style>
</head>
<body>
    <div id="chart1" class="chart-container"></div>
    <div id="chart2" class="chart-container"></div>
    <div id="chart3" class="chart-container"></div>
    <div id="chart4" class="chart-container"></div>

    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
    <script>
        // 图表1：双Y轴折线图
        const chart1Traces = [
            {
                x: [1, 2, 3, 4],
                y: [10, 15, 13, 17],
                name: '数据集A',
                type: 'scatter',
                yaxis: 'y'
            },
            {
                x: [1, 2, 3, 4],
                y: [100, 150, 130, 170],
                name: '数据集B',
                type: 'scatter',
                yaxis: 'y2'
            }
        ];

        const chart1Layout = {
            title: '图表1：双Y轴折线图',
            yaxis: { title: '左侧Y轴', side: 'left' },
            yaxis2: { title: '右侧Y轴', side: 'right', overlaying: 'y' },
            margin: { l: 70, r: 70 }
        };

        Plotly.newPlot('chart1', chart1Traces, chart1Layout);

        // 图表2：三Y轴混合图（柱状+折线）
        const chart2Traces = [
            {
                x: [1, 2, 3],
                y: [20, 14, 23],
                name: '销量',
                type: 'bar',
                yaxis: 'y'
            },
            {
                x: [1, 2, 3],
                y: [12, 18, 29],
                name: '利润',
                type: 'scatter',
                yaxis: 'y2'
            },
            {
                x: [1, 2, 3],
                y: [1000, 1500, 1200],
                name: '成本',
                type: 'scatter',
                yaxis: 'y3'
            }
        ];

        const chart2Layout = {
            title: '图表2：三Y轴混合图',
            yaxis: { title: '销量', side: 'left' },
            yaxis2: { title: '利润', side: 'right', overlaying: 'y', position: 0.9 },
            yaxis3: { title: '成本', side: 'right', overlaying: 'y', position: 0.95 },
            margin: { l: 70, r: 150 }
        };

        Plotly.newPlot('chart2', chart2Traces, chart2Layout);

        // 图表3：双Y轴面积图
        const chart3Traces = [
            {
                x: ['Jan', 'Feb', 'Mar'],
                y: [20, 14, 23],
                name: '用户增长',
                fill: 'tozeroy',
                type: 'scatter',
                yaxis: 'y'
            },
            {
                x: ['Jan', 'Feb', 'Mar'],
                y: [100, 150, 120],
                name: '收入',
                fill: 'tozeroy',
                type: 'scatter',
                yaxis: 'y2'
            }
        ];

        const chart3Layout = {
            title: '图表3：双Y轴面积图',
            yaxis: { title: '用户数', side: 'left' },
            yaxis2: { title: '收入(元)', side: 'right', overlaying: 'y' },
            margin: { l: 70, r: 70 }
        };

        Plotly.newPlot('chart3', chart3Traces, chart3Layout);

        // 图表4：三Y轴折线图
        const chart4Traces = [
            {
                x: [1, 2, 3, 4],
                y: [10, 15, 13, 17],
                name: '访问量',
                type: 'scatter',
                yaxis: 'y'
            },
            {
                x: [1, 2, 3, 4],
                y: [0.5, 0.7, 0.6, 0.8],
                name: '转化率',
                type: 'scatter',
                yaxis: 'y2'
            },
            {
                x: [1, 2, 3, 4],
                y: [500, 600, 550, 700],
                name: '客单价',
                type: 'scatter',
                yaxis: 'y3'
            }
        ];

        const chart4Layout = {
            title: '图表4：三Y轴折线图',
            yaxis: { title: '访问量', side: 'left' },
            yaxis2: { title: '转化率', side: 'right', overlaying: 'y', position: 0.9 },
            yaxis3: { title: '客单价', side: 'right', overlaying: 'y', position: 0.95 },
            margin: { l: 70, r: 150 }
        };

        Plotly.newPlot('chart4', chart4Traces, chart4Layout);
    </script>
</body>
</html>

关键实现要点 #

• 独立容器：每个图表对应一个独立的<div>，通过CSS的inline-block实现两排并列布局，避免图表重叠
• 多Y轴配置：
  • 在layout中定义yaxis、yaxis2、yaxis3等轴对象，通过overlaying: 'y'让多个Y轴共享同一X轴空间
  • 多右侧轴通过position属性调整间距，防止标题重叠
• 绑定数据到轴：每个数据轨迹（trace）通过yaxis字段指定对应的轴（如y2对应第二个Y轴）
• 样式优化：调整margin属性保证轴标题和图表内容不被截断

内容的提问来源于stack exchange，提问作者Rakshith M