Как создать отзывчивую пользовательскую метку в highchart

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/