javascript - 更改 highcharts 数据标签位置

Question

这是我的 jsfiddle 链接 http://jsfiddle.net/bb1m6xyk/1/

我希望我的所有标签(如 my data: 0 等)都位于每个区域的底部和中心。

$('#container').highcharts({
    chart: {
      type: 'area'
    },
    yAxis: {
      title: {
        text: 'Percent'
      }
    },
    plotOptions: {
      area: {
        enableMouseTracking: false,
        showInLegend: false,
        stacking: 'percent',
        lineWidth: 0,
        marker: {
          enabled: false
        },
        dataLabels: {
            className:'highlight',
          enabled: true,
          formatter: function () {
            console.log(this);
            return this.point.myData
          }
        }
      }
    },
    series: [{
      name: 'over',
      color: 'none',
      data: overData
    }, {
      id: 's1',
      name: 'Series 1',
      data: data,
      showInLegend: true,
      zoneAxis: 'x',
      zones: zones
    }]
  });

这可能吗？我尝试在 dataLabels 上使用 className 但它没有生效。

感谢任何帮助。

Answer 1

有几种方法可以在图表上呈现标签。

渲染器

实例:http://jsfiddle.net/11rj6k6p/

您可以使用 Renderer.label在图表上呈现标签 - 这是一种低级方法，但它可以让您完全控制标签的呈现方式。您可以循环区域并设置标签的 x 和 y 属性，例如像这样:

const labels = ['l1', 'l2', 'l3', 'l4', 'l5']

function drawLabels() {
  const zonesLabels = this.zonesLabels

  const series = this.get('s1')
  const { yAxis, xAxis } = series
  const y = yAxis.toPixels(0) - 20 // -20 is an additional offset in px


  series.zones.reduce((prev, curr, i) => {
    if (curr.value !== undefined) {
      const x = (xAxis.toPixels(prev.value) + xAxis.toPixels(curr.value)) / 2
      if (!zonesLabels[i]) {
        zonesLabels.push(
          this.renderer.label(labels[i], x, y).add().attr({
            align: 'center',
            zIndex: 10
          })
        )
      } else {
        zonesLabels[i].attr({ x, y })
      }
    }

   return curr
  }, { value: series.dataMin })
}

然后在加载时设置函数 - 渲染标签，并在重绘时设置 - 如果图表大小发生变化，则重新定位标签。

chart: {
  type: 'area',
  events: {
    load: function() {
      this.zonesLabels = []

      drawLabels.call(this)
    },
    redraw: drawLabels
  }
},

注解模块

实例:http://jsfiddle.net/a5gb7aqz/

如果您不想使用 Renderer API，您可以使用允许在图表配置中声明标签的注释模块。

添加模块

<script src="https://code.highcharts.com/modules/annotations.js"></script>

将区域映射到标签配置对象

const labels = ['l1', 'l2', 'l3', 'l4', 'l5']

function annotationsLabels() {
  const zonesLabels = []

  zones.reduce((prev, curr, i) => {
    zonesLabels.push({
      text: labels[i],
      point: {
        x: (prev.value + curr.value) / 2,
        y: 0,
        xAxis: 0,
        yAxis: 0
      }
    })

   return curr
  }, { value: 0 })

  return zonesLabels
}

设置注释选项

annotations: [{
  labels: annotationsLabels(),
  labelOptions: {
    shape: 'rect',
    backgroundColor: 'none',
    borderColor: 'none',
    x: 0,
    y: 0
  }
}],

数据标签和新系列

实例:http://jsfiddle.net/wpk1495g/

您可以创建一个新的散点图系列，它不会响应鼠标事件并且在图例中不可见。标签可以显示为 data labels .

将区域映射到系列点

const labels = ['l1', 'l2', 'l3', 'l4', 'l5']

function seriesData() {
  const points = []

  zones.reduce((prev, curr, i) => {
    points.push( {
      x: (prev.value + curr.value) / 2,
      y: 50,
      dataLabels: {
        enabled: true,
        format: labels[i]
      }
    })

    return curr
  }, { value: 0 })

 return points
}

在图表配置中设置系列选项

, {
  type: 'scatter',
  enableMouseTracking: false,
  showInLegend: false,
  data: seriesData(),
  zIndex: 10,
  color: 'none',
  dataLabels: { style: { textOutline: false }, x: 0, y: 0 }
}

输出