Question

当图表的区域拥挤时，

数据标签重叠是一个棘手的问题。我们来看看http://jsfiddle.net/zpd88mt7/1/

HTML

<body>
    <div id="container" class="chart_container" style="width:800px; height:400px;"></div>
</body>

JS

var chart_options = {
  chart: {
    renderTo: 'container',
    type: 'scatter',
    zoomType: 'xy'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        align: 'center',
        rotation: 0,
        x: 0,
        y: -2,
        formatter: function() {
          return this.point.name;
        }
      },
      marker: {symbol: 'circle'}
    }              
  },
  series: [
    {
      id: 'volumes',
      lineWidth: 0,
      index: 10,
      marker: {
        enabled: true,
        radius: 4
      },
      data: [
        {x: 6798, y: 770, name: '01-XXXXXXXXX', id: '01'},
        {x: 7934, y: 1350, name: '02-XXXXXXXXX', id: '02'},
        {x: 7516, y: 926, name: '03-XXXXXXXXX', id: '03'},
        {x: 7143, y: 907, name: '04-XXXXXXXXX', id: '04'},
        {x: 7741, y: 1188, name: '05-XXXXXXXXX', id: '05'},
        {x: 3449, y: 1121, name: '06-XXXXXXXXX', id: '06'},
        {x: 7542, y: 917, name: '07-XXXXXXXXX', id: '07'},
        {x: 8634, y: 1124, name: '08-XXXXXXXXX', id: '08'},
        {x: 7986, y: 1132, name: '09-XXXXXXXXX', id: '09'},
        {x: 9311, y: 1261, name: '10-XXXXXXXXX', id: '10'},
        {x: 7681, y: 552, name: '11-XXXXXXXXX', id: '11'},
        {x: 7665, y: 1148, name: '12-XXXXXXXXX', id: '12'},
        {x: 8024, y: 889, name: '13-XXXXXXXXX', id: '13'},
        {x: 8882, y: 1278, name: '14-XXXXXXXXX', id: '14'},
        {x: 7164, y: 1015, name: '15-XXXXXXXXX', id: '15'}
      ]
    }
  ]
}

var chart;
$(function() {
      chart = new Highcharts.Chart(chart_options);
  }
);

一个好的解决方案可能是在标签上进行迭代并将它们向上（或其他地方）移动到附近的自由位置，并用线条将它们连接到它们的点上。但看起来需要花费大量时间和精力。

你知道这是否已经解决了吗？

也许Highcharts开发人员正在计划这方面的事情？可能这会影响许多Highcharts用户。

数据标签在highcharts中相互重叠

0 个答案: