Question

我正在创建一个带有象限标签的气泡图，并希望在我放大时移动这些位置。我正在查看文档，但无法弄清楚。我将不胜感激任何帮助。谢谢！

function segmentation(segData) {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'segmentation',
      type: 'bubble',
      plotBorderWidth: 1,
      zoomType: 'xy',
    },
    legend: {
      enabled: false
    },
    title: {
      text: 'Title'
    },

    xAxis: {
      min: 0,
      max: 6,
      gridLineWidth: 1,
      title: {
        text: 'X Label'
      },
      labels: {
        format: '{value}'
      },
      plotLines: [{
        color: 'red',
        dashStyle: 'dot',
        width: 2,
        value: 3,
        label: {
          rotation: 0,
          y: 15,
          style: {
            fontStyle: 'italic',
            color: 'red',
          },
          text: 'Y HIgh'
        },
        zIndex: 3
      }, ]
    },

    yAxis: {
      min: 0,
      max: 6,
      startOnTick: false,
      endOnTick: false,
      title: {
        text: 'Y Label',
      },
      labels: {
        format: '{value}'
      },
      maxPadding: 0.2,
      plotLines: [{
        color: 'red',
        dashStyle: 'dot',
        width: 2,
        value: 3,
        label: {
          align: 'right',
          style: {
            fontStyle: 'italic',
            color: 'red',
          },
          text: 'X High',
          x: 5
        },
        zIndex: 3
      }]
    },
    tooltip: {
      useHTML: true,
      headerFormat: '<table>',
      pointFormat: '<tr><th colspan="2"><h4>{point.job_title}</h4></th></tr>' +
        '<tr><th>X :</th><td>{point.x:.2f}</td></tr>' +
        '<tr><th>X:</th><td>{point.y:.2f}</td></tr>' +
        '<tr><th>Count :</th><td>{point.z}</td></tr>',
      footerFormat: '</table>',
      followPointer: true
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          format: '{point.job_title}'
        }
      }
    },

    series: [{
      data: [{
        'name': 'D',
        'x': 4,
        'y': 4,
        'z': 40
      }, {
        'name': 'A',
        'x': 1,
        'y': 1.158,
        'z': 4
      }, {
        'name': 'C',
        'x': 1.2,
        'y': 0.304347826087,
        'z': 7
      }, {
        'name': 'B',
        'y': 0.0118577075099,
        'z': 3
      }]
    }]

  }, function(chart) {
    chart.renderer.text('Quadrant B', 150, 290).css({
      color: '#929195',
      fontSize: '60px',
      fontWeight: 'bold'
    }).add();
    chart.renderer.text('Quadrant A', 600, 290).css({
      color: '#929195',
      fontSize: '60px',
      fontWeight: 'bold'
    }).add();
    chart.renderer.text('Quadrant C', 150, 735).css({
      color: '#929195',
      fontSize: '60px',
      fontWeight: 'bold'
    }).add();
    chart.renderer.text('Quadrant D', 600, 735).css({
      color: '#929195',
      fontSize: '60px',
      fontWeight: 'bold'
    }).add();
  });
};

1）缩放前

2）放大象限C

3）只想看到＆＃34;象限C＆＃34;但所有象限标签都出现了

Answer 1

要使自定义标签位于相同坐标，您可以使用已启用dataLabels的散点图类型系列，禁用鼠标操作和隐藏标记。

示例：http://jsfiddle.net/t9jdkkvm/

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy'
    },
    series: [{
      data: [
        [1, 0]
      ]
    }, {
      enableMouseTracking: false,
      linkedTo: 0,
      marker: {
        enabled: false
      },
      dataLabels: {
        defer: false,
        enabled: true,
        y: 20,
        style: {
            fontSize: '20px'
        },
        format: 'Qadrant {point.name}'
      },
      keys: ['x', 'y', 'name'],
      data: [
        [1, 1, 'A'],
        [-1, 1, 'B'],
        [-1, -1, 'C'],
        [1, -1, 'D']
      ]
    }],
    yAxis: {
      min: -2,
      max: 2
    },
    xAxis: {
      min: -2,
      max: 2
    }
  });
});

动态象限标签位置与Highcharts

1 个答案: