格式化 Highchart 条形图轴标签答案

【问题标题】：Formatting Highchart bar charts axis labels格式化 Highchart 条形图轴标签
【发布时间】：2019-05-22 11:20:05
【问题描述】：

我正在尝试为 HighChart 中的条形图设置自定义 x 轴标签。我使用格式化程序将 % 和 里程碑日期 添加到标签中。当我在控制台中打印时，我可以看到预期的结果，但条形图标签没有反映这个值。

请在附件中找到我尝试过的小提琴。

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 轴标签：该值的 值 + % + 里程碑日期。例如：到 2019 年 5 月 1 日达到 30% 等

这可能吗？提前致谢！

【问题讨论】：

标签： angular typescript highcharts

【解决方案1】：

你非常接近......我做了一些事情来让它工作......

您在 forEach 中有一个 else 子句，因此除非值与数组的最后一项匹配，否则您只会看到 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
        }]
      }]
    });

检查完整的working demo here

【讨论】：