如何用两个y值绘制数据点?

时间:2017-07-28 09:36:41

标签: javascript highcharts

我一直在寻找这个答案,虽然有一些接近,但我还没有找到正确的解决方案。

我想绘制一段水位线图。我希望一侧的深度(例如:25米)y轴和另一侧的海拔高度(例如:1300米)。图表上应该只有一行数据点。

目前配置如下:

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;
};

目前我有两条不同的线,但我只想要一条。

1 个答案:

答案 0 :(得分:1)

实现您想要的最简单方法是将第二个yAxis链接到第一个yAxis并使用formatter修改第二个yAxis的标签。

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

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