javascript - 通过 x 和 y 绘图线、highcharts 将文本添加到生成的象限区域

Question

我有一个散点图来演示来自二维 x 和 y 的服务器的一些负载。

我将定义两条绘图线来显示该点是否过载，这就像演示所示(只是一个快速演示，所以我只是复制链接):

"http://codepen.io/anon/pen/xZprWa"

同时，我还需要通过一些标签来证明生成的象限意味着什么:

但是我无法从 api 中找到任何方法/选项来实现此目的，是否有任何简单的方法可以做到这一点？就像找到位置并在其上贴上标签将是绝对位置？

Answer 1

您可以定义每个 x 和 y 轴的绘图线，然后捕获加载事件。在该函数内，您应该提取线条的位置并使用渲染器打印标签。最后一步是计算正确四分之一的位置(通过与plotLines 进行比较并检查标签的宽度 - getBBox - 函数)。

chart: {
  events: {
    load: function() {
      var chart = this,
        r = chart.renderer,
        each = Highcharts.each,
        left = chart.plotLeft,
        top = chart.plotTop,
        h = chart.plotHeight,
        w = chart.plotWidth,
        xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        labels = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
        labelStyles = {
          'font-size': '12px',
          'color': 'red'
        },
        attr = {
          zIndex: 10
        },
        xPlotLine, yPlotLine,bbox, x, y;

      chart.label = [];

      xPlotLine = xAxis.toPixels(xAxis.plotLinesAndBands[0].options.value);
      yPlotLine = yAxis.toPixels(yAxis.plotLinesAndBands[0].options.value);


      //render
      each(labels, function(label, i) {

        chart.label[i] = r.text(label, 0, 0)
          .attr(attr)
          .css(labelStyles)
          .add();

        bbox = chart.label[i].getBBox();
          console.log(w);
        switch(i) {
            case 0:
            x = ((xPlotLine + left) / 2) - (bbox.width / 2);
            y = ((yPlotLine + top) / 2) - (bbox.height / 2);
            break;
          case 1:
            x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
            y = ((yPlotLine + top) / 2) - (bbox.height / 2);
            break;
          case 2:
            x = ((xPlotLine + left) / 2) - (bbox.width / 2);
            y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
            break;
          case 3:
            x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
            y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
            break;
        }

        chart.label[i].attr({
            x: x,
          y: y
        });
      });

    }
  }
},
xAxis: {
  plotLines: [{
    id: 'ver',
    color: '#FF0000',
    width: 2,
    value: 2
  }]
},
yAxis: {
  plotLines: [{
    id: 'hor',
    color: '#FF0000',
    width: 2,
    value: 100
  }]
},

示例:http://jsfiddle.net/x1zna57a/