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

【问题标题】：Highcharts: Add Dynamic Data to xAxis LabelHighcharts：将动态数据添加到 xAxis 标签
【发布时间】：2018-02-02 22:10:48
【问题描述】：

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

这是我到目前为止所得到的一个 jsfiddle：

https://jsfiddle.net/p4buj7j6/

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

我想读取第一列的 xAxis 标签：

  Desktop
UUs: 266,141

【问题讨论】：

标签： javascript highcharts

【解决方案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演示

【讨论】：