Question

是否可以强制“PB”数据标签位于椭圆中央，以便与y轴重叠？

我已将allowOverlap设置为true，但这只会引用其他数据标签，而不是其他图表元素。

由于

来自JSfiddle的代码：

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    marginRight: 20,
    marginLeft: 20,
    style: {
      fontFamily: 'Helvetica'
    },
    zoomType: 'xy'
  },
  title: {
    text: 'Finish line plot'
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    opposite: true,
    gridLineWidth: 1,
    reversed: true,
    title: {
      text: 'seconds back'
    },
    min: 0
  },
  yAxis: {
    opposite: true,
    gridLineWidth: 0,
    labels: {
      enabled: false
    },
    lineWidth: 2,
    title: {
      text: 'Finish line'
    },
    lineColor: '#000'
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        align: 'center',
        allowOverlap: true,
        formatter: function() {
          return this.point.name;
        },
        x: 0,
        y: 10,
        style: {
          textOutline: 'none'
        },
        enabled: true
      }
    },
    scatter: {
      marker: {
        fillColor: '#686',
        symbol: 'url(https://www.iconshock.com/image/Golden/Graphics/ellipse/)',
        width: 40,
        height: 40,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        headerFormat: '<b>Competitor info:</b><br>',
        pointFormat: '{point.x} seconds back'
      }
    }
  },
  series: [{
    name: 'Male',
    color: 'rgba(119, 152, 191, .5)',
    data: [{
        x: 0,
        y: 85,
        name: 'PB'
      },
      {
        x: 5.3,
        y: 71.8,
        name: 'VB'
      },
      {
        x: 3.5,
        y: 80.7,
        name: 'SF'
      },
      {
        x: 6.5,
        y: 72.6,
        name: 'RW'
      },
      {
        x: 7.2,
        y: 78.8,
        name: 'LH'
      },
      {
        x: 1.5,
        y: 74.8,
        name: 'CM'
      },
      {
        x: 1.7,
        y: 93.8,
        name: 'SH'
      },
      {
        x: 1.5,
        y: 70.0,
        name: 'TM'
      },
      {
        x: 3.0,
        y: 72.4,
        name: 'WP'
      },
      {
        x: 6.0,
        y: 85.9,
        name: 'DH'
      }
    ]
  }]
});

Answer 1

请参阅Highcharts documentation

为crop设置属性overflow和dataLabels应该可以解决问题：

...
series: [{
    dataLabels:{
      crop: false,
      overflow: 'none'
    },
    name: 'Male',
...

Fiddle

Highcharts：可以强制数据标签重叠y轴吗？

1 个答案: