如何将 Highcharts 区域图上的标签包含到系列区域答案

【问题标题】：How can I contain a label on a Highcharts area chart to the series' area如何将 Highcharts 区域图上的标签包含到系列区域
【发布时间】：2018-08-02 21:15:57
【问题描述】：

出于某种原因，无论我们尝试什么，面积图系列上的标签似乎都有自己的想法。尽管短标签看起来可以放在数据区域内，但它却将它放在结束行，从区域外流出来。

我们怀疑这可能是由于 min 和 max 日期超出了系列的 min 和 max，但这些缓冲区是必需的。

是否可以选择让标签包含在自己的系列中，而不是渗入空白？

以下是示例图表配置，这里是 JSFiddle：http://jsfiddle.net/sLqu34cn/

Highcharts.chart('container', {
  chart: {
    type: "area",
    height: 200
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    area: {
      stacking: "percent",
      pointPlacement: "on"
    },
    series: {
      lineWidth: 0,
      fillOpacity: 1,
      marker: {
        enabled: false
      },
      label: {
        style: {
          color: "white",
          textOutline: "1px black"
        }
      }
    }
  },
  series: [
    {
      name: "Two",
      data: [[1532217600000, 1], [1532822400000, 0]],
      color: "#41B6E6"
    },
    {
      name: "Three",
      data: [[1532217600000, 0], [1532822400000, 2]],
      color: "#0072CE"
    }
  ],
  xAxis: {
    tickWidth: 1,
    title: {
      enabled: false
    },
    labels: {
      format: "{value: %b %e}"
    },
    max: 1533243166375,
    min: 1530478366375,
    type: "datetime"
  },
  yAxis: {
    tickInterval: 20,
    title: {
      text: null
    },
    labels: {
      format: "{value}%"
    },
    max: 100,
    min: 0
  },
  tooltip: {}
});

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

可能不是完美的解决方案，但您可以创建一些自定义来定位系列标签。这是一个如何手动计算三角形区域中心的示例：

Highcharts.wrap(Highcharts.Chart.prototype, 'drawSeriesLabels', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var chart = this,
        plotTop = chart.plotTop,
        plotLeft = chart.plotLeft,
        series = chart.series,
        height = chart.yAxis[0].height,
        x1,
        x2,
        y1,
        y2;

    x1 = ((series[0].graphPath[1] + plotLeft) * 2 + series[0].graphPath[4] + plotLeft) / 3;

    y1 = (height + plotTop + series[0].graphPath[2] + plotTop + series[0].graphPath[5] + plotTop) / 3;

    x2 = (series[1].graphPath[1] + plotLeft + (series[1].graphPath[4] + plotLeft) * 2) / 3;

    y2 = ((series[1].graphPath[2] + plotTop) * 2 + series[1].graphPath[5] + plotTop) / 3;

    series[0].labelBySeries.attr({
        x: x1,
        y: y1,
        align: 'center'
    });

    series[1].labelBySeries.attr({
        x: x2,
        y: y2,
        align: 'center'
    });
});

现场演示：http://jsfiddle.net/BlackLabel/34z8od5f/

文档：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

【讨论】：