如何使用Highcharts在不同的Y轴中创建一系列多个数据

Question

I'm working on a project to register pump curves in a MySQL database. So I'm trying to create the closest possible one chart with 3 yAxis (H, NPSH, Power) and 2 xAxis (flow and efficiency). I uploaded a pump curve image here for better understanding. Note this efficiency is a logarithm scale but I prefer to create a linear scale to make it easy.

Well, every curve chart has more one rotor curve, in this case we have 5 curves which is five types of rotor (176mm, 169mm, 162mm, 154mm and 148mm). Each rotor gives one data series in a yAxis as H, NPSH, Power and Efficiency. So I need to create a series for each rotor size whem each series get the values ​​of the data: H,NPSH,Power,Efficiency with its yAxis referals. Here is the link 's page with the code.

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Curva da Bomba'
        },
        subtitle: {
            text: 'KSB Meganorm 32-160 | Rotação 1750rpm'
        },

        xAxis: [{
            tickmarkPlacement: 'on',
            labels: {
                format: '{value}m³/h',
                style: {
                    color: '#005ca2'
                }
            },
            title: {
                text: 'Vazão Q (m³/h)',
                style: {
                    color: '#005ca2'
                }
            }
        },{// Rendimento
            labels: {
                format: '{value}%',
                style: {
                    color: '#005ca2'
                }
            },
            title: {
                text: 'Rendimento n (%)',
                style: {
                    color: '#005ca2'
                }
            },
            opposite: true,
            top: 90,
            height: 0,
            offset: 0,
            lineWidth: 1
        }],
        yAxis: [{ // Altura manométrica H
            labels: {
                format: '{value}mca',
                style: {
                    color: '#005ca2'
                }
            },
            title: {
                text: 'Altura manométrica H (mca)',
                style: {
                    color: '#005ca2'
                }
            },
            top: 90,
            height: 250,
            offset: 0,
            lineWidth: 1
        }, { // NPSH
            labels: {
                format: '{value}mca',
                style: {
                    color: '#005ca2'
                }
            },
            title: {
                text: 'NPSH (mca)',
                style: {
                    color: '#005ca2'
                }
            },
            top: 380,
            height: 120,
            offset: 0,
            lineWidth: 1
        }, {// Potência
            title: {
                text: 'Potência (hp)',
                style: {
                    color: '#005ca2'
                }
            },
            labels: {
                format: '{value} hp',
                style: {
                    color: '#005ca2'
                }
            },
            top: 540,
            height: 220,
            offset: 0,
            lineWidth: 1
        }],
        tooltip: {
            crosshairs: true,
            shared: true
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            x: 0,
            verticalAlign: 'top',
            y: 34,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
         plotOptions: {
            spline: {
                lineWidth: 3,
                states: {
                    hover: {
                        lineWidth: 4
                    }
                },
                marker: {
                    enabled: false
                },
                pointInterval: 1, // one hour
                pointStart: 6
            }
        },
        series: [{
            name: 'Rendimento n (Rotor 176mm)',
            color: '#FF0000',
            type: 'spline',
            data: [40,44,45.5,48,50,51.5,52.5,53,53.8,54.7,54.6,53.4,53.4,52.5],
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: '%'
            }
        }, {
            name: 'Pressão H (Rotor 176mm)',
            color: '#FF0000',
            type: 'spline',
            data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
            tooltip: {
                valueSuffix: 'mca'
            }
        }, {
            name: 'NPSH (Rotor 176mm)',
            color: '#FF0000',
            type: 'spline',
            yAxis: 1,
            data: [1.2,1.25,1.3,1.4,1.4,1.4,1.4,1.4,1.4,1.63,1.78,2.5,3.2,4],
            tooltip: {
                valueSuffix: 'mca'
            }
        }, {
            name: 'Potência (Rotor 176mm)',
            color: '#FF0000',
            type: 'spline',
            yAxis: 2,
            data: [0.8,0.87,0.92,0.96,1.01,1.04,1.08,1.13,1.15,1.19,1.22,1.24,1.26,1.29],
            tooltip: {
                valueSuffix: 'hp'
            }
        }]
    });
});

Answer 1

You can set which yAxis a series is plotted against by using the yAxis: <index> value in the series setup. For example:

...
{
            name: 'Pressão H (Rotor 176mm)',
            color: '#FF0000',
            type: 'spline',
            data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
            tooltip: {
                valueSuffix: 'mca'
            },
            yAxis: 1,
        }
...

Here is a very quick example of it. You have 2 xAxis and 3 yAxis. No idea if this is how you want to display it but this shows you how to move the axis around.