Форматирование меток осей столбчатых диаграмм Highchart

Question

Я пытаюсь установить пользовательские метки оси X для гистограмм в HighChart. Я использовал форматтер, чтобы добавить % и вехи к меткам. Я могу видеть ожидаемый результат при печати в консоли, но метки гистограммы не отражают это значение.

Пожалуйста, найдите прилагаемую скрипку того, что я пробовал.

https://jsfiddle.net/mt74opnu/2/

Code:

/* public milestonedata: MilestoneDetailsSchedule = {
    tickInterval: 30,
    milestonedetails: [{
      percentage: 30,
      milestonedate: "May 1, 2019"
    }, {
      percentage: 60,
      milestonedate: "May 25, 2019"
    }]
}; // this the object that I am trying to access for labels */

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  xAxis: {
    categories: ['My Goal', 'My Progress', 'My Branch', 'My Region']
  },
  yAxis: {
    min: 0,
    max: 100,
    tickInterval: 30,
    labels: {
      overflow: 'justify',
      formatter: function() {
        //console.log('In charts');
        //console.log(this.value);
        var milestonedata = {
          tickInterval: 30,
          milestonedetails: [{
            percentage: 30,
            milestonedate: "May 1, 2019"
          }, {
            percentage: 60,
            milestonedate: "May 25, 2019"
          }]
        };
        var result;
        milestonedata.milestonedetails.forEach((milestone) => {
          //console.log(milestone); 
          //would like the labels to be 30% by date1, 60% by date 2
          if (milestone.percentage == this.value && milestone.milestonedate) {
            result = this.value + "% by <br>" + milestone.milestonedate;
            console.log(result);
          } else {
            result = this.value;
          }
          return result;
        });
      }
    }
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    data: [{
      y: 25
    }, {
      y: 50
    }, {
      y: 75
    }, {
      y: 100
    }]
  }]
});

Я хотел бы видеть метки оси x: значение +% + дата этапа для этого значения. например: 30% к 1 мая 2019 и т. д.

Возможно ли это? Заранее спасибо!

Answer 1

Вы были очень близки ... несколько вещей, которые я сделал, чтобы это сработало ...

• у вас было предложение else внутри forEach, поэтому, если значения не соответствуют самому последнему элементу массива, вы увидите только печатное значение this.value
• чтобы вернуть результаты внутри forEach, вы можете прервать и вернуть или дождаться завершения forEach, прежде чем вернуть значение метки

Вот обновленный соответствующий код для TS файла:

Highcharts.chart('container', {
      chart: {
        type: 'bar'
      },
      xAxis: {
        categories: ['My Goal', 'My Progress', 'My Branch', 'My Region']
      },
      yAxis: {
        min: 0,
        max: 100,
        tickInterval: 30,
        labels: {
          overflow: 'justify',
          formatter: function () {
            //console.log('In charts');
            //console.log('this.value',this.value);
            var milestonedata = {
              tickInterval: 30,
              milestonedetails: [{
                percentage: 30,
                milestonedate: "May 1, 2019"
              }, {
                percentage: 60,
                milestonedate: "May 25, 2019"
              }, {
                percentage: 90,
                milestonedate: "July 12, 2019"
              }]
            };
            var result;
            milestonedata.milestonedetails.forEach((milestone) => {
              //console.log(milestone); 
              //would like the labels to be 30% by date1, 60% by date 2
              if (milestone.percentage == this.value && milestone.milestonedate) {
                result = this.value + "% by <br>" + milestone.milestonedate;
                console.log('printing:',result);
              }/* else {
                result = this.value;
              }*/
            });
              return result;
          }
        }
      },
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true
          }
        }
      },
      series: [{
        data: [{
          y: 25
        }, {
          y: 50
        }, {
          y: 75
        }, {
          y: 100
        }]
      }]
    });

проверьте полную рабочую демонстрацию здесь