Точечная диаграмма на границе, если значения находятся за пределами границ

Question

Я занимаюсь разработкой точечной диаграммы (с 4 квадрантами).Мне бы хотелось, чтобы каждая точка в серии лежала либо внутри квадрантов (если значения находятся с-в границах оси x и оси y), либо отображалась только на границе оси, если значения находятся вне диапазона оси.

Прикрепил jsfiddle, где вторая точка в каждой серии находится за пределами границы, но невидимы (как и ожидалось), но я бы хотел, чтобы эти точки были нанесены на границу 100 или -100 в моем случае ипокажите подсказку с фактическим значением.

http://jsfiddle.net/raghuromp/xjzd9k02/2/

var series1Data = [ [71,33], [75, -105]];
var series2Data = [ [80,-59], [101, 56]];

Может ли кто-нибудь помочь мне в достижении этого?

Answer 1

Вы можете достичь этого, используя событие загрузки , например:

chart: {
  events: {
    load: function() {
      for (var i = 0; i < this.series.length; i++) {
        var data = this.series[i].data
        for (var j = 0; j < data.length; j++) {
          data[j].actualXValue = data[j].x
          data[j].actualYValue = data[j].y
          if (data[j].x > 100) {
            data[j].x = 100
          }
          if (data[j].x < -100) {
            data[j].x = -100
          }
          if (data[j].y > 100) {
            data[j].y = 100
          }
          if (data[j].y < -100) {
            data[j].y = -100
          }
        }
        this.series[i].update({
          data: data
        })
      }
    }
  },
  ...
}

Проходит все имеющиеся точки, изменяет их значение, если они превышают + -100, но сохраняет действительное значение в отдельном параметре.

Затем, изменив подсказку, чтобы отразить фактические значения, можно сделать так:

tooltip: {
  formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        this.point.actualXValue + ': ' + this.point.actualYValue;
  }
},

Рабочая JSFiddle: http://jsfiddle.net/ewolden/nsdk40ez/21/