Highcharts: tự động thay đổi định dạng tooltip?

Question

Tôi muốn định dạng chú giải công cụ Highcharts có thể tái sử dụng phụ thuộc vào giá trị toàn cầu. (Tôi đang sử dụng cùng một biểu đồ để chuyển đổi giữa các loại tiền tệ và giá trị số: nếu tôi hiển thị dữ liệu tiền tệ trên biểu đồ, tôi muốn định dạng chú giải công cụ làm đơn vị tiền tệ.)

Tuy nhiên, this trong chức năng toolchip Highcharts chỉ để chỉ điểm dữ liệu cục bộ và tôi dường như không thể chuyển giá trị vào.

Làm cách nào để chuyển giá trị vào hoặc nhận giá trị toàn cầu? Đây là mã của tôi ngay bây giờ, không thành công khủng khiếp:

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) 
     } 
    }); 
}); 

Cách tốt hơn để làm điều này là gì?

Answer 1

Bạn không cần thay đổi tooltip.formatter, bởi vì chính bản thân số formatter sẽ thay đổi số tooltip.

tôi sẽ cố gắng một cái gì đó như:

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

đâu 'your_currency_serie_name' là tên của serie đó đề cập đến giá trị tiền tệ.

Answer 2

Bạn có thể đặt tùy chọn tooltip trong mỗi chuỗi cũng như thông qua các tùy chọn valueDecimals, valuePrefix và valueSuffix. Sau đó, tooltip sẽ sử dụng các tùy chọn này để hiển thị dữ liệu. Trực tiếp demo.

thiết lập Generic:

... 
     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] 
     }] 
...