Highcharts：在工具提示中传递辅助数据变量

Question

我正在尝试传递位于我的系列数据集的每个点中的辅助变量。到目前为止，我已经做到了这一点，但是当我尝试将鼠标悬停在图表上的另一个数据点上时，系统会为所有点打印相同的数据，而不是为该特定点显示正确的数据。

我尝试了多种解决方案，我想坚持使用这个，但是我有一个小障碍，我似乎无法克服。

这是一个 jsFiddle 来显示我遇到的问题：https://jsfiddle.net/Flik1/dfn51akc/47/

// Data gathered from http://populationpyramid.net/germany/2015/

// Age categories
var categories = [
  'column 1', 'column 2', 'column 3', 'column 4'
];

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    followTouchMove: true,
    spacingTop: 10,
    spacingLeft: 5,
    spacingRight: 5
  },

  xAxis: [{
      reversed: true,
      tickPosition: 'inside',
      startOnTick: true,
      endOnTick: true,
      categories: categories,
      labels: {
        enabled: false
      }
    },
    { // mirror axis on right side   
      opposite: true,
      reversed: true,
      linkedTo: 0,
      tickPosition: 'inside',
      categories: [
        'NIL'
      ],
      labels: {
        step: 1,
        enabled: false
      }
    }
  ],

  plotOptions: {
    series: {
      stacking: 'normal',
      borderColor: '#fafafa'
    }
  },

  tooltip: {
    shared: true,
    formatter: function() {
      var points = this.points;
      var series = this.series;
      var pointsLength = points.length;
      var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';

      for (index = 0; index < pointsLength; index++) {
        tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
      }

      return tooltipMarkup;
    }
  },

  series: [{
    data: [{
      y: -2.2,
      tt: "1"
    }, {
      y: -2.6,
      tt: "2"
    }, {
      y: -1.3,
      tt: "3"
    }, {
      y: -5.2,
      tt: "4"
    }]
  }, {
    color: '#FF0000',
    dataLabels: {
      enabled: true,
      inside: true,
      align: 'left',
      format: '{x}'
    },
    data: [{
      y: 1.3,
      tt: "5"
    }, {
      y: 2.3,
      tt: "6"
    }, {
      y: 4.3,
      tt: "7"
    }, {
      y: 1.7,
      tt: "8"
    }]
  }]
});

<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/modules/exporting.js"></script>

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

我认为这行代码有问题，因为它显示了每个系列的第一个 'tt' 变量。

this.points[index].series.userOptions.data[0].tt

第 1 列的预期结果为 1 和 5，第 2 列的预期结果为 2 和 6，第 3 列的预期结果为 3 和 7，第 4 列的预期结果为 4 和 8。

Answer 1

尝试this.points[index].point.options.tt

// Data gathered from http://populationpyramid.net/germany/2015/

// Age categories
var categories = [
  'column 1', 'column 2', 'column 3', 'column 4'
];

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    followTouchMove: true,
    spacingTop: 10,
    spacingLeft: 5,
    spacingRight: 5
  },

  xAxis: [{
      reversed: true,
      tickPosition: 'inside',
      startOnTick: true,
      endOnTick: true,
      categories: categories,
      labels: {
        enabled: false
      }
    },
    { // mirror axis on right side   
      opposite: true,
      reversed: true,
      linkedTo: 0,
      tickPosition: 'inside',
      categories: [
        'NIL'
      ],
      labels: {
        step: 1,
        enabled: false
      }
    }
  ],

  plotOptions: {
    series: {
      stacking: 'normal',
      borderColor: '#fafafa'
    }
  },

  tooltip: {
    shared: true,
    formatter: function() {
      var points = this.points;
      var series = this.series;
      var pointsLength = points.length;
      var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';

      for (index = 0; index < pointsLength; index++) {
        tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
      }

      return tooltipMarkup;
    }
  },

  series: [{
    data: [{
      y: -2.2,
      tt: "1"
    }, {
      y: -2.6,
      tt: "2"
    }, {
      y: -1.3,
      tt: "3"
    }, {
      y: -5.2,
      tt: "4"
    }]
  }, {
    color: '#FF0000',
    dataLabels: {
      enabled: true,
      inside: true,
      align: 'left',
      format: '{x}'
    },
    data: [{
      y: 1.3,
      tt: "5"
    }, {
      y: 2.3,
      tt: "6"
    }, {
      y: 4.3,
      tt: "7"
    }, {
      y: 1.7,
      tt: "8"
    }]
  }]
});

<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/modules/exporting.js"></script>

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

Highcharts：在工具提示中传递辅助数据变量

Highcharts: Passing a secondary data variable in the tooltip

javascript

json

tooltip

formatter

highcharts