使用Chart.js创建含反向条形图的三类组合图表遇问题求助

要实现包含两个折线图和一个反向条形图的组合图表，你可以利用Chart.js的组合图表特性，同时配置反向y轴来实现条形图的反向效果。以下是修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合图表示例</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>
<script>
    var ctx = document.getElementById('chart').getContext('2d');

    var gradient1 = ctx.createLinearGradient(0, 0, 0, 300);
    var gradient2 = ctx.createLinearGradient(0, 0, 0, 300);

    gradient1.addColorStop(0, 'rgba(221, 239, 228, 1)');
    gradient2.addColorStop(0, 'rgba(230, 243, 243, 1)');

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [
                {
                    backgroundColor: gradient1,
                    borderColor:'rgba(143, 203, 96, 1)',
                    label: 'Max Temperature',
                    fill: true,
                    data: [12, 19, 3, 5, 2, 3],
                    pointStyle: 'circle',
                    pointRadius: 10,
                    pointHoverRadius: 15,
                    yAxisID: 'y'
                },
                {
                    backgroundColor: gradient2,
                    borderColor:'rgba(3, 140, 140, 1)',
                    label: 'Min Temperature',
                    fill: true,
                    data: [22, 29, 13, 15, 12, 13],
                    pointStyle: 'circle',
                    pointRadius: 10,
                    pointHoverRadius: 15,
                    yAxisID: 'y'
                },
                {
                    type: 'bar',
                    backgroundColor: 'rgba(255, 159, 64, 0.6)',
                    label: '反向条形图',
                    data: [8, 15, 22, 18, 25, 10],
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: '温度',
                        font: { size: 25 }
                    }
                },
                y1: {
                    beginAtZero: true,
                    position: 'right',
                    reverse: true,
                    title: {
                        display: true,
                        text: '反向指标',
                        font: { size: 25 }
                    },
                    grid: {
                        drawOnChartArea: false
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '类别',
                        font: { size: 25 }
                    }
                }
            },
            tension: 0.3,
            plugins: {
                legend: {
                    position: 'top',
                }
            }
        }
    });
</script>

</body>
</html>

关键实现要点： #

• 组合图表配置：给第三个数据集设置type: 'bar'，实现同一画布内折线图与条形图的组合，主图表类型可保留为line。
• 反向条形图实现：新增右侧y轴（y1），设置reverse: true让轴刻度从高到低排列，条形图会沿反向轴绘制，形成反向效果。
• 轴绑定：用yAxisID属性将不同数据集绑定到对应y轴，确保折线图用左侧轴、条形图用右侧反向轴。
• 样式优化：关闭右侧轴的网格线（drawOnChartArea: false），避免与左侧网格线重叠，提升可读性。

内容的提问来源于stack exchange，提问作者Adarsh Srivastav