使用 addAnnotation 时注释标签重叠

Question

我使用 Highcharts 来渲染散点图。

我在此图表上添加注释时遇到问题。当我根据用户设置从异步请求加载数据时，我将数据和注释添加到已呈现的图表上。 但是，当使用 addAnnotation 函数时，我无法防止标签重叠。

chart.addAnnotation({
  draggable: "",
  id: "chartAnnotations",
  labels: annotationsLabels,
  labelOptions: {
    align: "left",
    allowOverlap: false,
    borderColor: "#5c5c5c",
    shape: 'connector'
  }
}); 

这是在预渲染图表上添加系列和注释的示例。 https://jsfiddle.net/k29h6oqc/2/

谢谢您的帮助。

Answer 1

我通过简单地从图表的

load

事件上的单独函数添加注释来解决您的问题：

events: {
  load: function() {
    addAnnotations(this);
  }
}

const randomString = (length) =>
  Array(length)
  .fill('')
  .map(() => '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' [Math.floor(Math.random() * 62)])
  .join('');

let chartData = [];

for (i = 0; i < 20; i++) {
  chartData.push({
    id: String.fromCharCode(i + 65),
    name: randomString(20),
    x: Math.random() * 100,
    y: Math.random() * 100
  });
}

function createChartAndAnnotations() {
  let options = {
    chart: {
      renderTo: "container",
      type: 'scatter',
      plotBorderWidth: 1,
      events: {
        load: function() {
          addAnnotations(this);
        }
      }
    },
    xAxis: {
      gridLineWidth: 1
    },
    yAxis: {
      startOnTick: false,
      endOnTick: false
    },
    series: [{
      data: chartData,
      marker: {
        symbol: "square"
      }
    }]
  };

  let chart = new Highcharts.Chart(options);

  function addAnnotations(chart) {
    let annotationsLabels = chartData.map(el => ({
      allowOverlap: false,
      point: el.id.toString(),
      text: el.name
    }));

    chart.addAnnotation({
      draggable: "",
      id: "chartAnnotations",
      labels: annotationsLabels,
      labelOptions: {
        align: "left",
        allowOverlap: false,
        borderColor: "#5c5c5c",
        shape: 'connector'
      }
    });
  }
}

createChartAndAnnotations();

#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/stock/9/highstock.js"></script>
<script src="https://code.highcharts.com/9/highcharts-more.js"></script>
<script src="https://code.highcharts.com/9/modules/annotations.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

老实说，我不太确定为什么它忽略了原始实现中的重叠部分。我猜是异步执行的东西。