如何绘制两个y值的数据点？

Question

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

我想绘制一段时间的水位折线图。我想在一边有深度（例如：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; 
}; 

目前我有两个单独的行，但我只想要一个。

Answer 1

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

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

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