如何使用highcharts在不同的yaxis中创建一系列多个数据答案

【问题标题】：How to create in a series multiple data each in a different yaxis using highcharts如何使用highcharts在不同的yaxis中创建一系列多个数据
【发布时间】：2013-06-06 19:02:05
【问题描述】：

我正在做一个在 MySQL 数据库中注册泵曲线的项目。所以我正在尝试创建一个最接近的图表，其中包含 3 个 yAxis（H、NPSH、Power）和 2 个 xAxis（流量和效率）。我上传了泵曲线图像here 以便更好地理解。请注意，此效率是对数刻度，但我更喜欢创建线性刻度以使其变得简单。

嗯，每个曲线图都有多个转子曲线，在这种情况下，我们有 5 条曲线，即五种转子（176mm、169mm、162mm、154mm 和 148mm）。每个转子在 y 轴上给出一个数据系列，如 H、NPSH、功率和效率。所以我需要为每个转子尺寸创建一个系列，每个系列都获取数据的值：H、NPSH、Power、Efficiency 及其 yAxis 参考值。这是link 的页面，上面有代码。

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

【问题讨论】：

标签： javascript highcharts series curve

【解决方案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,
        }
...

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

【讨论】：