Блог

Главная - Вопросы по программированию - Как расположить метки данных в средней точке диаграммы arearange в highcharts?

Как расположить метки данных в средней точке диаграммы arearange в highcharts?

#javascript #php #jquery #charts #highcharts

#javascript #php #jquery #Диаграммы #highcharts

Вопрос:

 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) amp;amp; (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

Пожалуйста, помогите!! Заранее спасибо

Ответ №1:

Вы можете добавить фиктивные ряды рассеяния с отключенными маркерами и включенными метками данных, чтобы название ряда отображалось в нужном месте:

     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/d01e2ymx/

Ссылка на API: https://api.highcharts.com/highcharts/series.scatter