如何将高图的数据标签更改到新位置

Question

如何改变highchart的数据标签到新的位置，像这样的图像?我想切换到这个位置

谢谢!

http://jsfiddle.net/ruagiahanoi/6180x5n0/

y: 58,
        dataLabelss: { x: 0, y: -100 },
        color: '#8aea0f',
        drilldown: {
            name: 'Firefox versions',
            categories: ['美元 v31', '澳元 v32'],
            data: [29,29],
            color: ['#0078b4', '#035a82']

Answer 1

这可以通过不同的方式实现。一个是我从这篇文章中摘下来的。

http://jsfiddle.net/6180x5n0/1/

var positionLabels = function(chart) {
    var series = chart.series[0],
      dataLabelsGroup = series.dataLabelsGroup,
      xVal;
    Highcharts.each(dataLabelsGroup.element.children, function(d) {
      xVal = (d.attributes.transform.value).substring((d.attributes.transform.value).indexOf('(') + 1, (d.attributes.transform.value).indexOf(','));
      $(d).attr('transform', 'translate(' + xVal + ',135)')
    })
  };

注意，这个函数在数据标签的y坐标上增加了135px。

你需要相应地改变图表的属性:

        chart: {
            type: 'pie',
            events: {
        load: function() {
          positionLabels(this)
        },
        redraw: function() {
          positionLabels(this)
        }
      },
        },

作为另一种选择，您可能只想将数据系列标签的y坐标设置为0(参见此处的fiddle)。这将使图表在重绘时更加灵活:

           dataLabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: '#ffffff',
                distance: -70,
                y: 0
            }

进一步阅读，您可能会对以下内容感兴趣:

在饼图切片中放置标签(Highchart)