如何在highcharts中表示x和y轴范围之外的点

Question

我已经创建了一个带有一个xAxis和双yAxis (ER & ES)的图表。现在我需要表示一个不在xAxis和ER yAxis范围内的点。

例如:当前xAxis数据：['58', '53', '48', '43', '38', '33']

当前ER yAxis数据：[3.23, 3.5, 4.6, 3.2, 4.6, 5.1]

我需要表示最佳ER点，如x-value：'95‘& y-value: 9.8

这是我对一个xAxis和双yAxis (ER &ES)的处理：http://jsfiddle.net/gy4h1xs7/

下面这样的东西或任何建议都应该受到欢迎：

​

你能告诉我如何在我的图表中表示这个最佳ER点吗？提前感谢

Answer 1

想法是这样的：

​

Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  legend: {
    layout: 'vertical',
    itemStyle: {
      cursor: 'default'
    }
  },
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          return false;
        }
      }
    }
  },
  xAxis: [{
    title: {
      text: ''
    },
    categories: ['95', '58', '53', '48', '43', '38', '33']
  }],
  yAxis: [{
      title: {
        text: 'ER'
      },
      lineWidth: 1,
      gridLineColor: '#FFF',
      plotLines: [{
        value: 3.30,
        dashStyle: 'shortdash',
        width: 2,
        color: '#B593CE'
      }]
    },
    {
      title: {
        text: 'ES'
      },
      lineWidth: 1,
      gridLineColor: '#FFF',
      opposite: true
    },
    {
      title: {
        text: '2nd Y'
      },
      lineWidth: 1,
      gridLineColor: '#FFF'
    }
  ],

  series: [{
    yAxis: 0,
    type: 'spline',
    color: '#00B1F1',
    data: [null, 3.23, 3.5, 4.6, 3.2, 4.6, 5.1]
  }, {
    yAxis: 1,
    type: 'spline',
    color: '#008D90',
    data: [null, 324, 253, 356, 563, 367, 542]
  }, {
    yAxis: 2,
    color: 'red',
    data: [9.8],
    type: 'spline'
  }],

  data: {
    seriesMapping: [{
      x: 0,
      y: 1
    }, {
      x: 0,
      y: 2
    }, {
      x: 0,
      y: 3
    }]
  }
});

#container {
  min-width: 320px;
  height: 400px;
  margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

​

http://jsfiddle.net/kqfL43g7/