Сокращенные значения графика во всплывающей подсказке

Question

Я использую столбчатую диаграмму, где у меня есть данные в тысячах, и я хочу сокращать данные во всплывающей подсказке, как если бы это было 35100 , поэтому это должно быть как 35.1k , но это должно быть в подсказке. У меня есть варианты всплывающей подсказки, как это ...

tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat:'<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                  '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
      footerFormat: "</table>",
      shared: true,
      useHTML: true
}

Я также пишу метод, из которого получаю сокращенное значение.

SI_prefixes : any = ["", "k", "M", "G", "T", "P", "E"];

abbreviateNumber(number){
    var tier = Math.log10(number) / 3 | 0;
    if(tier == 0) return number;
    var prefix = this.SI_prefixes[tier];
    var scale = Math.pow(10, tier * 3);
    var scaled = number / scale;
    return scaled.toFixed(1) + prefix;
}

Как получить этот тип сокращенного значения, отформатированного как 35.1k , 56.8M и т.д. во всплывающей подсказке? Как использовать этот метод со значением точки во всплывающей подсказке?

Answer 1

Вместо того, что вы использовали, вы можете использовать функцию formatter, как показано ниже, чтобы вы могли использовать свою функцию abbreviateNumber:

tooltip: {
    formatter: function () {
        var s = "<span style=\"font-size:10px\">" + this.x + "</span><table>";

        $.each(this.points, function () {
            s += "<tr><td style=\"color:"+ this.series.color+";padding:0\">"+ 
               this.series.name +": </td>" +
              "<td style=\"padding:0\"><b>"+ abbreviateNumber(this.y) +"</b></td></tr>";
        });
        s +=  "</table>";
        return s;
    },
    shared: true,
    useHTML: true
}

Подробнее о ToolTip Formatter