简体   繁体   中英

How to create in a series multiple data each in a different yaxis using highcharts

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'
            }
        }]
    });
});

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM