Question

我正在尝试为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％，等等。

这可能吗？预先感谢！

Answer 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

格式化Highchart条形图轴标签

1 个答案: