仅当悬停，高图时，通过x和y绘制线将文本添加到生成的象限区域

Question

这是Add text to generated quadrant area by x and y plot lines , highcharts的另一个问题。

在上一个问题中，我需要将文本添加到生成的象限区域，接受答案的代码示例位于

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

但是如果我需要在悬停到该象限时显示右上角区域文字怎么办？有可能吗？

Answer 1

可以更改opacity标签并仅显示指针当前悬停的象限的标签。您可以通过检查绘图线和绘图区域来确定指针所在的象限。

示例：http://codepen.io/anon/pen/qbGWME?editors=0010

$(function() {
  var categories = ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12', '12-13', '12-14', '12-15'];

  var chart = $('#container').highcharts({
    credits: {
      enabled: false //去除右下角的水印
    },
    chart: {
      type: 'scatter',
      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,
              opacity: 0
            });
          });

        }
      }
    },
    tooltip: {
      shared: true
    },
    legend: {
      enabled: false
    },
    xAxis: {
      gridLineColor: "#E9E9E9",
      gridLineWidth: 1,
      tickWidth: 0,
      lineColor: "#E9E9E9",
      plotLines: [{
        color: '#FF0000',
        width: 1,
        zIndex: 999,
        value: 10,
        dashStyle: 'dot'
      }]
    },
    yAxis: {
      title: {
        align: 'high',
        rotation: 0,
        offset: 0,
        y: -17, //上移一点点,
        text: ""
      },
      labels: {
        enabled: false
      },
      plotLines: [{
        color: '#FF0000',
        width: 1,
        zIndex: 999,
        value: 100,
        dashStyle: 'dot'
      }]

    },
    plotOptions: {},
    series: [{
      data: [{
          x: 1,
          y: 320
        }, {
          x: 2,
          y: 10
        }, {
          x: 2,
          y: 3
        }, {
          x: 3,
          y: 3
        }, {
          x: 10,
          y: 32
        }, {
          x: 20,
          y: 33
        }, {
          x: 12,
          y: 31
        }, {
          x: 32,
          y: 30
        }

      ],
      color: '#9adede',
      showInLegend: false
    }]

  }).highcharts();

  $("#container").mousemove(move);

  function move(event) {
    var x = event.pageX,
      y = event.pageY,
      quadrant;

    if (chart.label) {
      // get quadrant
      quadrant = getQuadrant(chart,x,y);
      if(chart.currentQ !== quadrant) {
        chart.currentQ = quadrant;
        // hide all
        Highcharts.each(chart.label, function(label){
          label.attr({opacity:0});
        });
        if(quadrant !== null) {
          // show label if hidd
          chart.label[quadrant].attr({
            opacity: 1
          });
        }
      }
    }
  }

  function getQuadrant(chart,x,y) {
    var xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        xPlotLine = xAxis.toPixels(xAxis.plotLinesAndBands[0].options.value),
        yPlotLine = yAxis.toPixels(yAxis.plotLinesAndBands[0].options.value),
        left = chart.plotLeft,
        top = chart.plotTop,
        h = chart.plotHeight,
        w = chart.plotWidth,
        isTop, isLeft;
    // 0 - topL, 1 - topR, 2 - botL, 3 - botR

    if(!chart.isInsidePlot(x - left, y - top)) {
      // not in plot area
      return null;
    } 
    // top or bottom
    isTop = y < yPlotLine ? 0 : 2;
    // left or right
    isLeft = x < xPlotLine ? 0 : 1;
    return isTop + isLeft;
  }
});