时间戳

首页 > 解决方案 > 如何将dataLabels定位在highcharts中arearange图表的中点？

javascript - 如何将dataLabels定位在highcharts中arearange图表的中点？

问题描述

Highcharts.chart('container', {
  chart: {
    type: 'arearange',
    zoomType: 'x',
    scrollablePlotArea: {
      minWidth: 600,
      scrollPositionX: 1
    }
  },

  title: {
    text: 'Temperature variation by day'
  },

  xAxis: {
    //type: 'datetime',
    accessibility: {
      rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
    }
  },

  yAxis: {
    title: {
      text: null
    },
    labels: {
      enabled:true
    }
  },
  plotOptions: {
    arearange: {
      dataLabels: {
        enabled: true,
        yLow: 5,
        verticalAlign: 'bottom',
        inside: true,
        color: 'black',
        formatter: function(e) { 
          if((this.x==0) && (this.point.low==this.y))
            return this.series.name
        }
      }
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    name: "AREA 1",
    data: [
      [0, 10],
      [0, 10],
    ],
    borderColor: 'black',
    borderWidth: 0.2,
  },
    {
    name: "AREA 2",
    data: [
     [20, 40],
     [20, 40],
    ]
  }]
});

上面是我使用arearange图表绘制的示例代码。正如我想要的那样，该图已成功绘制。但是好像有问题。我希望系列名称“AREA1”和“AREA2”显示在各自 y 轴值的中点。即“区域 1”应显示在 5（0 和 10 的中点），“区域 2”应显示在 30（20 和 40 的中点）。有没有办法做到这一点？我尝试yLow在 plotOptions 中指定值。但它对我不起作用，因为系列数据是动态的。

我使用的图表是 highcharts，版本是 4.1.5

请帮忙！！提前致谢

标签： javascriptphpjquerychartshighcharts

解决方案

您可以添加带有禁用标记和启用数据标签的模拟分散系列，以在适当的位置显示系列名称：

    series: [..., {
            linkedTo: 0,
            dataLabels: {
                format: 'AREA 1'
            },
            type: 'scatter',
            data: [(area1Data[0][0] + area1Data[0][1]) / 2]
        }, {
            linkedTo: 1,
            dataLabels: {
                format: 'AREA 2'
            },
            type: 'scatter',
            data: [(area2Data[0][0] + area2Data[0][1]) / 2]
        }
    ]

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

API 参考： https ://api.highcharts.com/highcharts/series.scatter

推荐阅读