如何在Highcharts图表中为两个数据系列配置独立Y轴？

Hey there! Let's fix up your Highcharts setup to get those two lines on independent Y-axes and handle that massive CSV dataset properly. Here's what you need to do:

Key Issues to Address #

First, let's note a couple of quick fixes in your original code:

• You're loading Highcharts twice (once from CDN, once locally) — this will cause conflicts, so we'll keep just one reliable CDN version.
• The rangeSelector is a Highstock feature, so we'll switch to Highcharts.stockChart instead of Highcharts.chart to make that work.
• Most importantly, we need to add a second Y-axis and link each data series to its own axis.

Modified Working Code #

Here's the updated code with all the fixes and improvements:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Stock Data - Highcharts</title>
    <!-- Use Highstock CDN since we're using rangeSelector -->
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/boost.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            Highcharts.stockChart('container', {
                chart: {
                    type: 'line',
                    boost: {
                        enabled: true // Critical for rendering millions of rows efficiently
                    }
                },
                data: {
                    csvURL: 'http://achouman-com.stackstaging.com/example.csv'
                },
                rangeSelector: {
                    selected: 1
                },
                title: {
                    text: 'Stock Price & Algorithm Output'
                },
                // Dual Y-axes configuration
                yAxis: [
                    {
                        title: {
                            text: 'Price (Dollars)'
                        },
                        opposite: false // Left-side axis for Dollars
                    },
                    {
                        title: {
                            text: 'Algorithm Output'
                        },
                        opposite: true // Right-side axis for Algorithm data
                    }
                ],
                // Link each series to its respective Y-axis
                series: [
                    {
                        name: 'Dollars',
                        yAxis: 0, // Use first Y-axis
                        tooltip: {
                            valueSuffix: ' $'
                        }
                    },
                    {
                        name: 'Algorithm out',
                        yAxis: 1, // Use second Y-axis
                        tooltip: {
                            valueSuffix: ''
                        }
                    }
                ]
            });
        });
    </script>
</head>
<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

What Changed & Why #

1. Dual Y-Axes

   • The yAxis property is now an array of two objects. Each defines a separate axis, with opposite: true pushing the second axis to the right so they don't overlap.
   • Each series uses the yAxis property to specify which axis it belongs to (indexes start at 0). This ensures each line scales to its own data range, so neither looks flat.

2. Handling Large Datasets

   • We enabled the Boost module with boost.enabled: true. This uses WebGL to render millions of data points efficiently, which is essential for your large CSV.

3. Cleaned Up Dependencies

   • Removed duplicate Highcharts imports to avoid conflicts. We're using the Highstock CDN since rangeSelector is a Highstock-only feature.

4. CSV Matching

   • The series.name values match exactly with your CSV headers ("Dollars" and "Algorithm out"), so Highcharts automatically maps the correct columns to each series.

Quick Tips #

• Make sure your CSV is properly formatted (no extra spaces in headers, consistent column counts) to avoid parsing issues.
• For extremely large CSVs, consider compressing the file (gzip) to speed up loading.
• If you don't need the rangeSelector, switch back to Highcharts.chart and remove that configuration block.

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