Highcharts：将动态数据添加到xAxis标签

Question

我正在尝试在Highcharts的柱形图的xAxis标签中包含一个额外的数据。我试图使用xaxis.labels.formatter添加数据，但我遗漏了一些东西。

这是我到目前为止所获得的一个方面：

https://jsfiddle.net/p4buj7j6/

您会在第一系列数据中注意到我传递了一个额外的命名值：'unique_users'。

我希望第一列的xAxis标签为：

  Desktop
UUs: 266,141

Answer 1

您必须使用图表加载事件来更新图表xAxis类别

  chart: {
    height: 500,
    events: {
      load: function() {
        var cat_data = [];
        this.series[0].data.map((el) => {
          cat_data.push(el.category + '<br> UUs: ' + el.options['unique_users'])
        })
        this.update({
          xAxis: [{
            categories: cat_data,
          }]
        });
      },
    }
  },

Highcharts.chart('container', {
  chart: {
    height: 500,
    events: {
      load: function() {
        var cat_data = [];
        this.series[0].data.map((el) => {
          cat_data.push(el.category + '<br> UUs: ' + el.options['unique_users'])

        })
        this.update({
          xAxis: [{
            categories: cat_data,
          }]
        });
      },
    }

  },
  title: {
    text: 'Data'
  },
  xAxis: [{
    categories: ['Desktop', 'Smartphone', 'Tablet', 'Desktop & Smartphone', 'Smartphone & Tablet', 'Tablet & Desktop', 'All Devices'],

  }],
  yAxis: [{
    labels: {
      style: {
        color: '#fff'
      }
    },
    title: {
      text: 'Conversions',
      style: {
        color: '#fff'
      }
    },
    lineWidth: 0
  }, {
    labels: {
      style: {
        color: '#fff'
      }
    },
    title: {
      text: 'Frequency',
      style: {
        color: '#fff'
      }
    },
    opposite: true,
    lineWidth: 0
  }],
  series: [{
    name: 'Conversions',
    data: [{
      'unique_users': 266141,
      y: 16965544
    }, {
      'unique_users': 33386,
      y: 35020346
    }, {
      'unique_users': 124110,
      y: 7013713
    }, {
      'unique_users': 124110,
      y: 6247524
    }, {
      'unique_users': 103051,
      y: 4194179
    }, {
      'unique_users': 56536,
      y: 2243437
    }, {
      'unique_users': 73948,
      y: 1038735
    }],
    type: 'column'
  }, {
    name: 'Frequency',
    data: [2.0, 1.4, 2.7, 3.9, 2.7, 2.8, 6.3],
    type: 'spline',
    yAxis: 1
  }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

Fiddle演示