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

的更多信息

在工具提示中缩写图表的值

1 个答案: