如果值超出边界，则在边界上绘制散点图

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

您可以像这样使用 load event 来实现此目的：

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/

如果值超出边界，则在边界上绘制散点图

Scatter chart plot on border if values are outside the bounderies

scatter

highcharts