Question

我有一个HighCharts样条曲线图，数据标签出现在点上方。我想从标签上绘制一条线到图表上的点，以帮助用户看到标签对应的内容。

代码是：

Highcharts.chart('container', {
    xAxis: {
        minPadding: 0.05,
        maxPadding: 0.05
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}',
                y: -20,
                allowOverlap: true,
                useHTML: true
            }
        },
    },
    series: [{
        data: [
            {name: 'First', x: 0, y: 29.9},
            {name: 'Second <br>&nbsp;', x: 0.1, y: 29.9},
            {name: 'Third', x: 1, y: 1.5},
            {name: 'Fourth', x: 2, y: 106.4}
        ]
    }]
});

请注意，我无法将标签直接放在点上，因为有时标签会相互重叠，我必须将它们垂直交错。

Answer 1

您需要设置数据标签的形状。指向该点的唯一可用形状是标注，但它与仅仅是连接线有很大不同。

您需要定义自己的形状：

Highcharts.SVGRenderer.prototype.symbols.connector = function(x, y, w, h, options) {
  var anchorX = options && options.anchorX,
      anchorY = options && options.anchorY,
      path,
      yOffset,
      lateral = w / 2,
      H = Highcharts;

  if (H.isNumber(anchorX) && H.isNumber(anchorY)) {

    path = ['M', anchorX, anchorY];

    // Prefer 45 deg connectors
    yOffset = y - anchorY;
    if (yOffset < 0) {
      yOffset = -h - yOffset;
    }
    if (yOffset < w) {
      lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
    }

    // Anchor below label
    if (anchorY > y + h) {
      path.push('L', x + lateral, y + h);

     // Anchor above label
    } else if (anchorY < y) {
      path.push('L', x + lateral, y);

    // Anchor left of label
    } else if (anchorX < x) {
      path.push('L', x, y + h / 2);

    // Anchor right of label
    } else if (anchorX > x + w) {
      path.push('L', x + w, y + h / 2);
    }
  }
  return path || [];
};

然后将其用作数据标签配置中的形状;

      dataLabels: {
    shape: 'callout',
    enabled: true,
    format: '{point.name}',
    y: -20,
    allowOverlap: true,
    borderWidth: 1,
    borderColor: 'black',
    useHTML: true
  }

示例：http://jsfiddle.net/02fvu3d6/

如何在HighCharts中将数据从mapLabel渲染到图表标记？

1 个答案: