基于ngx-charts实现堆叠柱状图与折线图组合图表的示例求助

Got it! I totally get why those official combo chart demos can feel confusing at first—let’s break this down with a straightforward, working example using Chart.js (a widely used, easy-to-follow charting library). This example will show you exactly how to combine stacked bars with a line chart, with clear comments to explain each part.

Step 1: Full Working Code #

Save this as an HTML file and open it in any browser to see the combo chart in action:

<!DOCTYPE html>
<html>
<head>
    <!-- Include Chart.js from a CDN (no local setup needed) -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- The canvas element where the chart will render -->
    <div style="width: 80%; margin: 0 auto;">
        <canvas id="comboChart"></canvas>
    </div>

    <script>
        // Get the canvas element
        const ctx = document.getElementById('comboChart').getContext('2d');

        // Initialize the combo chart
        const comboChart = new Chart(ctx, {
            type: 'bar', // Base chart type (we'll override for the line dataset)
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], // X-axis labels
                datasets: [
                    // First stacked bar dataset
                    {
                        label: 'In-Store Sales',
                        data: [65, 59, 80, 81, 56, 55],
                        backgroundColor: '#ff6384',
                        stack: 'sales' // Same stack name = stacked with other bars in this stack
                    },
                    // Second stacked bar dataset
                    {
                        label: 'Online Sales',
                        data: [28, 48, 40, 19, 86, 27],
                        backgroundColor: '#36a2eb',
                        stack: 'sales' // Matches the first bar's stack name
                    },
                    // Line chart dataset
                    {
                        label: 'Total Customers',
                        data: [120, 130, 150, 140, 160, 135],
                        type: 'line', // Override base type to line
                        borderColor: '#ffce56',
                        backgroundColor: 'rgba(255, 206, 86, 0.2)',
                        fill: true, // Optional: fills area under the line
                        tension: 0.4, // Makes line smooth instead of jagged
                        yAxisID: 'y' // Uses the same y-axis as bars (can change to dual y-axis if needed)
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        stacked: true, // Enable stacking on X-axis for bars
                    },
                    y: {
                        stacked: true, // Enable stacking on Y-axis for bars
                        beginAtZero: true, // Start Y-axis at 0 (good for sales data)
                        title: {
                            display: true,
                            text: 'Values'
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Sales & Customer Trends (Jan-Jun)'
                    }
                }
            }
        });
    </script>
</body>
</html>

Key Parts Explained #

Let’s break down the most important bits so you can adapt this to your data:

• Stacked Bars: The two bar datasets share the same stack: 'sales' property, which tells Chart.js to stack them on top of each other instead of side-by-side.
• Line Chart Override: The third dataset uses type: 'line' to override the base bar type—this is how we mix chart types in a combo chart.
• Scales Configuration: Setting stacked: true on both the X and Y axes ensures the bars stack correctly. You can also add a second Y-axis if your line data uses a different scale (just add a y1 axis in scales and set yAxisID: 'y1' on the line dataset).
• Customization: Tweak colors, labels, fill settings, and smoothness (tension) to match your design needs.

Testing the Example #

Just copy the code above into a file named combo-chart.html, open it in Chrome, Firefox, or any modern browser, and you’ll see a fully functional stacked bar + line combo chart. You can edit the labels and data arrays to plug in your own values.

内容的提问来源于stack exchange，提问作者Frank Corona Prendes