Question

由于某种原因，无论我们尝试什么，面积图系列上的标签似乎都有自己的主意。即使一个短标签看起来可以放在数据区域内，也可以将其放置在最后一行，渗出该区域。

我们怀疑这可能是因为最小日期和最大日期超出了最小和最大序列，但是这些缓冲区是必需的。

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

下面是示例图表配置，这是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: {}
});

Answer 1

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

data/loc.csv

实时演示：http://jsfiddle.net/BlackLabel/34z8od5f/

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

如何在Highcharts区域图表上包含该系列区域的标签

1 个答案: