ハイチャートで反応性の高いカスタムラベルを作成する方法

Question

散布図を作成し、指定されたボックスにラベルを追加します。自分のラベルを作成しましたが、画面が最小になったら位置を調整しませんそのラベルの。

labels: { 
    items : [ 
    { 
     html : 'Prioritas 4', 
     style : { 
      left : '380%', 
      top : '60px', 
      fontSize : '10px' 
     } 
    }, 
    { 
     html : 'Prioritas 3', 
     style : { 
      left : '660%', 
      top : '60px', 
      fontSize : '10px' 
     } 
    } 
    ] 
}, 

と私の完全なコード）

$('#ketenagalistrikan-pembenahan-layanan-chart').highcharts({ 

chart: { 
    type: 'scatter', 
    zoomType: 'xy' 
}, 
title: { 
    text: 'Pembenahan Dimensi Layanan' 
}, 
subtitle: { 
    text: 'Source: rad-research.com' 
}, 
labels: { 
    items : [ 
    { 
     html : 'Prioritas 4', 
     style : { 
      left : '380%', 
      top : '60px', 
      fontSize : '10px' 
     } 
    }, 
    { 
     html : 'Prioritas 3', 
     style : { 
      left : '660%', 
      top : '60px', 
      fontSize : '10px' 
     } 
    } 
    ] 
}, 
xAxis: { 
    title: { 
     enabled: true, 
     text: 'Kepentingan' 
    }, 
    min: -0.5, 
    max: 39.3, 
    startOnTick: true, 
    endOnTick: true, 
    showLastLabel: true, 
    plotLines: [{ 
     color: 'black', 
     dashStyle: 'dot', 
     width: 2, 
     value: 12.7, 
     zIndex: 3 

    },{ 
     color: 'black', 
     dashStyle: 'dot', 
     width: 2, 
     value: 26, 
     zIndex: 3 
    },{ 
     color: 'black', 
     dashStyle: 'dot', 
     width: 2, 
     value: 39.3, 
     zIndex: 3 
    }] 
}, 
yAxis: { 
    title: { 
     text: 'Kepuasan' 
    }, 
    tickInterval: 8.9, 
    startOnTick: true, 
    endOnTick: true, 
    showLastLabel: true, 
    plotLines: [{ 
     color: 'black', 
     dashStyle: 'dot', 
     width: 2, 
     value: 46.2, 
     zIndex: 3 
    },{ 
     color: 'black', 
     dashStyle: 'dot', 
     width: 2, 
     value: 55.2, 
     zIndex: 3 
    }] 
}, 
plotOptions: { 
    scatter: { 
     marker: { 
      radius: 5, 
      states: { 
       hover: { 
        enabled: true, 
        lineColor: 'rgb(100,100,100)' 
       } 
      } 
     }, 
     states: { 
      hover: { 
       marker: { 
        enabled: false 
       } 
      } 
     }, 
     tooltip: { 
      headerFormat: '<b>{series.name}</b><br>', 
      pointFormat: '{point.x} cm, {point.y} kg' 
     } 
    } 
}, 
series: [{ 
    name: 'Marketing', 
    data: [[8.75, 45.8]] 
},{ 
    name: 'Sales', 
    data: [[15.0, 43.6]] 
},{ 
    name: 'Aktivasi/Instalasi', 
    data: [[-0.3, 53.2]] 
},{ 
    name: 'Contact Center', 
    data: [[1, 52.2]] 
},{ 
    name: 'Customer Account', 
    data: [[-0.3, 60.1]] 
},{ 
    name: 'Field Support', 
    data: [[30.5, 40.3]] 
},{ 
    name: 'Billing', 
    data: [[37.5, 59.2]] 
}] 

}です。

Answer 1

この場合のラベルは静的なので、手動で再描画しない限り反応しません。

レンダラを使用してレンダリングされたオブジェクトを完全にレンダリングすることもできます。ヘルプaxis.toPixels（）メソッドを使用すると、それらを簡単に応答させることができ、固定値にとどまります。

ロードイベントに項目を作成します。

load: function() { 
    this.customTexts = []; 

    var text = this.renderer.text(
      'Responsive text', 
      this.xAxis[0].toPixels(15), 
      this.yAxis[0].toPixels(50) 
     ) 
      .css({ 
      fontSize: '10px' 
      }) 
      .add(); 

    this.customTexts.push(text); 
    }, 

が再描画イベントでアイテムを再描画：

redraw: function() { 
    this.customTexts[0].attr({ 
     x: this.xAxis[0].toPixels(15), 
     y: this.yAxis[0].toPixels(50) 
    }); 
    } 

例：http://jsfiddle.net/hfev4w7c/