Question

是否可以在多边形图中添加标签？

我想将图例中显示的标签添加到多边形图本身，但无法弄清楚自己如何做到这一点（如果可能的话）。

编辑：

我使用dataLabels.formatter这样添加了dataLabel

dataLabels: {
    enabled: true,
    rotation: 45,
    x: 20,
    y: 0,
    formatter: function() {
        if(_.indexOf(this.series.data,this.point) == Math.floor(circle_template.steps * 0.6)) {
            return "TECHIEK";
        }
    },
}

我还使用以下代码添加了一个旋转：

注意：我没有创建这个，忘记了我找到的地方

function realignLabels(serie) {

    _.each(serie.points, function (j, point) {
        if (!point.dataLabel) return true;

        var max = serie.yAxis.max,
        labely = point.dataLabel.attr('y'),
        labelx = point.dataLabel.attr('x');

        if (point.y / max < 0.05) {
            point.dataLabel.attr({
                y: labely - 20,
                x: labelx + 5,
                rotation: 0
            });
        }
    });
}

Highcharts.Series.prototype.drawDataLabels = (function (func) {
    return function () {
        func.apply(this, arguments);
        if (this.options.dataLabels.enabled || this._hasPointLabels) {
            realignLabels(this);
        }
    };
}(Highcharts.Series.prototype.drawDataLabels));

这将导致：

正如我在评论中所说的那样，我不想使用气泡图，因为我打算在这些情节上绘制这样的情节：

Answer 1

使用多边形系列时，添加dataLabels.enabled：true会将dataLabels添加到所有多边形点，而不是一个多边形形状。在这里，您可以看到它如何工作的示例： http://jsfiddle.net/s3zp8cce/

您可以使用chart.renderer.label：

为多边形添加标签

 function(chart) {
    var xAxis = chart.xAxis[0],
      yAxis = chart.yAxis[0];
    chart.renderer.label('Target', xAxis.toPixels(165), yAxis.toPixels(60)).attr({
      zIndex: 10,
      'text-anchor': 'middle'
    }).add()
  }

http://jsfiddle.net/s3zp8cce/1/

您也可以使用气泡系列，它在气泡内有标签。在这里，您可以看到它如何工作的示例： http://jsfiddle.net/cvwf92vj/

Highcharts多边形标签

1 个答案: