Highcharts：如何动态更改提示框格式化程序？

Question

我想要根据全局变量格式化可重复使用的Highcharts工具提示。 （我正在使用相同的图表在货币和数字值之间切换：如果我在图表上显示货币数据，我希望将工具提示格式化为货币）。

但是，在Highcharts工具提示函数中，this似乎仅指向本地数据点，并且我似乎无法传递一个值。

如何传递一个值或获取全局值？ 这是我的代码，它失败得很惨：

getChartTooltip: function() {
    return function(graphType) {
        var prefix = (graphType === 'currency') ? '$' : ''; // Fails
        return prefix + Highcharts.numberFormat(this.y, 0);
    };
},

initializeChart: function() { 
  var graphType = 'currency';
  var chartOptions = {};
  chartOptions.tooltip = {
      formatter: getChartTooltip(graphType)
  };
  // create chart, etc... 
  $('change-chart-type').on('click', function() { 
     // Try to update the tooltip formatter, fail horribly...
     graphType = 'number';
     chart.series[0].update({
         tooltip: {
             formatter: _this.getChartTooltip(graphType)
         }
     });
 });

有更好的方法来做这件事吗？

- Richard

Answer 1

您不需要更改tooltip.formatter，因为是formatter本身会更改tooltip。

我建议尝试这样的代码：

tooltip: {
     formatter: function() {
          var unit = ' $',
              result = this.value;
          if(this.series.name == 'your_currency_serie_name'){
               result += unit;
          }
          return result;
     }
}

'your_currency_serie_name' 是指代货币价值的系列名称。

- Kabulan0lak

Answer 2

您可以通过valueDecimals、valuePrefix和valueSuffix选项在每个系列中设置tooltip选项。然后，tooltip将使用这些选项来显示数据。有关示例，请参见实时演示。

通用设置：

...
        series: [{
            tooltip: {
                valueDecimals: 0,
                valuePrefix: '',
                valueSuffix: ''
            },
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            tooltip: {
                valueDecimals: 2,
                valuePrefix: '$',
                valueSuffix: ' USD'
            },
            data: [129.9, 171.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 1216.4, 1194.1, 195.6, 154.4]
        }]
...

- wergeld