ハイチャートで動的象限ラベルの位置

Question

象限ラベル付きのバブルチャートを作成していて、ズームインするときにこれらの位置を移動したいのですが、ドキュメントを見ていましたが、わかりませんでした。私はこれについて何か助けていただければ幸いです。ありがとう！

ここに私のコードです。 Link to jsfiddle

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）

3）が唯一の "クアドラントC" が、すべての象限のラベルが

を表示を見たいクアドラントCにズームズーム

2）の前に

Answer 1

カスタムラベルを同じ座標に配置するには、ena bled 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 
    } 
    }); 
});