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

Question

我正在做一个在MySQL数据库中注册泵曲线的项目。 因此，我尝试使用3 yAxis（H，NPSH，功率）和2 xAxis（流量和效率）创建最接近的一个图表。 为了更好的理解，我在此处上传了泵曲线图像。 请注意，此效率是对数刻度，但我更喜欢创建一个线性刻度以使其变得容易。

好吧，每个曲线图都有一条转子曲线，在这种情况下，我们有5条曲线，这是五种类型的转子（176mm，169mm，162mm，154mm和148mm）。 每个转子在y轴上给出一个数据序列，即H，NPSH，功率和效率。 所以我需要为每个转子尺寸创建一个序列，然后每个序列都通过yAxis引用获取数据值：H，NPSH，Power，Eficiency。 这是带有代码的链接页面。

$(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

您可以使用series设置中的yAxis: <index>值来设置针对哪个yAxis系列进行绘制。 例如：

...
{
            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,
        }
...

这是一个非常简单的例子 。 您有2个xAxis和3个yAxis。 不知道这是否是您想要的显示方式，但这向您展示了如何移动轴。