Блог

Я создаю точечную диаграмму и добавляю метку на поле, которое было указано, мне удалось создать его метку, но когда ее экран свернут, не корректируйте положение его меток.

 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]]
}]
  

});

Метки в этом случае являются статическими, поэтому, если вы не перерисуете их вручную, они не будут реагировать.

Я предпочитаю другой способ — вы можете использовать средство визуализации и полностью контролировать отображаемые объекты. С помощью метода 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 /