javascript - 如何绘制带有两个y值的数据点？

我一直在寻找这个答案已有一段时间了，尽管有一些接近，但是我还没有找到正确的解决方案。

我想绘制一段时间内水位的折线图。我要在一侧具有y轴的深度（例如：25m），在另一侧具有海平面以上的高度（例如：1300m）。图表上只能有一条带有数据点的线。

此刻的配置如下所示：

var config = {
    title: {
        text: 'Borehole Water Level'
    },
    options: {
        tooltip: {
            formatter: function() {
                var tooltip = '<b><u>' + boreholename + '</u></b>';

                $.each(this.points, function() {
                    tooltip += '<br/><strong>Date : </strong>' + BaseService.formatDate(this.x);
                    tooltip += '<br/><strong>' + this.series.name + ': </strong>' +
                    this.y + 'm';
                });
                return tooltip;
            },
            shared: true
        }
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%e. %b',
            year: '%b'
        }
    },
    yAxis: [{
        title: {
            text: 'Depth [m]'
        }
        }, {
            opposite: true,
            title: {
                text: 'Level above sea [m]'
            }
        }],
        series: [{
            name: 'Water Level depth',
            data: chartdata,
        }, {
            name: 'Water Level above sea level',
            data: chartdata2,
            yAxis: 1
        }]
    };
    return config;
};

目前，我有两条线，但我只想要一条。

最佳答案

实现所需目标的最简单方法是将第二个yAxis链接到第一个yAxis，并使用formatter修改第二个yAxis的标签。

API参考：
http://api.highcharts.com/highcharts/yAxis.linkedTo
http://api.highcharts.com/highcharts/yAxis.labels.formatter

例：
http://jsfiddle.net/d9ruh9n1/

关于javascript - 如何绘制带有两个y值的数据点？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45369950/