Số chú giải công cụ định dạng trong Highcharts

Question

Tôi sử dụng tooltip.pointFormat để hiển thị dữ liệu bổ sung trong chú giải công cụ. Rất tiếc, chỉ có point.x được định dạng chính xác với một nghìn dấu phân cách.

jsFiddle

$(function() { 
    Highcharts.setOptions({ 
    global: { 
     useUTC: false, 
    }, 
    lang: { 
     decimalPoint: ',', 
     thousandsSep: '.' 
    } 
    }); 
    $('#container').highcharts({ 
    xAxis: { 
     type: 'datetime' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count}</b><br/>', 
     shared: true 
    }, 
    series: [{ 
     data: [{ 
     y: 20009.9, 
     count: 20009.9 
     }, { 
     y: 10009.9, 
     count: 20009.9 
     }, { 
     y: 40009.9, 
     count: 20009.9 
     }], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 3600 * 1000 // one hour 
    }] 
    }); 
}); 

Answer 1

Tìm thấy câu trả lời here.

Số được định dạng với tập hợp con các quy ước định dạng phao từ thư viện C funciton sprintf. Định dạng được thêm vào bên trong các dấu ngoặc nhọn, được phân tách bằng dấu hai chấm. Ví dụ:

• Hai chữ số thập phân: "{point.y:.2f}"
• Hàng ngàn phân cách, không có chữ số thập phân: {point.y:,.0f}
• Hàng ngàn phân cách, một nơi thập phân: {point.y:,.1f}

Vì vậy, sử dụng :,.1f bên trong các dấu ngoặc đơn sẽ định dạng chính xác số.

tooltip: { 
    pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>', 
    shared: true 
} 

jsFiddle

Answer 2

Instaed của pointFormat, sử dụng tooltip formatter và sau đó Highcharts.numberFormat

tooltip: { 
      formatter:function(){ 

       return this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.options.count,1,',','.') + '</b><br/>' + 'Count: <b>'+Highcharts.numberFormat(this.point.y,1,',','.')+'</b><br/>'; 
      } 
     }, 

Ví dụ: http://jsfiddle.net/8rx1ehjk/4/

Answer 3

Trong trường hợp của chúng tôi tooltipFormatter áp dụng định dạng duy nhất cho y bất động sản, tôi thấy vài cách làm thế nào để thêm định dạng không chỉ cho y,

1. định dạng thêm cho mỗi tooltip và cho mỗi thuộc tính như thế này point.count:,.f

   pointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>', 
   

2. tạo mở rộng nhỏ như thế này

   (function (Highcharts) { 
       var tooltipFormatter = Highcharts.Point.prototype.tooltipFormatter; 
   
       Highcharts.Point.prototype.tooltipFormatter = function (pointFormat) { 
       var keys = this.options && Object.keys(this.options), 
        pointArrayMap = this.series.pointArrayMap, 
        tooltip; 
   
       if (keys.length) { 
        this.series.pointArrayMap = keys; 
       }  
   
       tooltip = tooltipFormatter.call(this, pointFormat);   
       this.series.pointArrayMap = pointArrayMap || ['y']; 
   
       return tooltip; 
       } 
   }(Highcharts)); 
   

Example