如何修改Highcharts x軸tooltip文本

Question

如何修改x軸tooltip值？我想添加一個前綴並將值除以1000.在此示例中，x軸數據以毫秒爲單位，但我希望以小數點後兩位顯示秒數。我可以使用格式化程序功能來更改x軸標籤，但沒有看到如何更改工具提示。

Answer 1

只需添加一個後綴，你會好起來使用headerFormat，如：

headerFormat: '<span style="font-size: 10px"> {point.key}s </span><br/>' 

但既然你想做師在那裏，你需要完全控制用formatter功能：

tooltip: { 
     formatter: function(d){ 
      var rV = (this.x/1000).toFixed(2) + "s <br/>"; 
      rV += '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b> ' + this.y + '</b><br/>'; 
      return rV; 
     } 
    }, 

這裏有一個工作示例：

$(function() { 
 
    $('#container').highcharts({ 
 

 
     tooltip: { 
 
      formatter: function(d){ 
 
       var rV = (this.x/1000).toFixed(2) + "s <br/>"; 
 
       rV += '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b> ' + this.y + '</b><br/>'; 
 
       return rV; 
 
\t \t \t } 
 
     }, 
 

 
     series: [{ 
 
      name: 'Short', 
 
      data: [[1.23 * 1000, Math.random() * 10], [2.343 * 1000, Math.random() * 10],[3.343 * 1000, Math.random() * 10],[4.343 * 1000, Math.random() * 10],[5.343 * 1000, Math.random() * 10]] 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 300px"></div>

EDITS

這是你fiddle的更新版本。

隨着多個系列你想共享的工具提示和循環點對象：

tooltip: { 
     formatter: function(d){ 
      var rV = (this.x/1000).toFixed(2) + "s <br/>"; 
      this.points.forEach(function(d){ 
       rV += '<span style="color:' + d.color + '">\u25CF</span> ' + d.series.name + ': <b> ' + d.y + '</b><br/>'; 
      });     
      return rV; 
     }, 
     shared: true 
    }, 

全部工作代碼：

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      zoomType: 'xy' 
 
     }, 
 
     title: { 
 
      text: 'Profile' 
 
     }, 
 
     subtitle: { 
 
      text: '(pressure & velocity vs. dispense time)' 
 
     }, 
 
     xAxis: [{ 
 
      //categories: [0,48,98,150,200], 
 
      //labels:{rotation:-45, step:0} 
 
      title: { 
 
       enabled: true, 
 
       text: 'Seconds from start' //Seconds from start of Dispense \t \t \t \t 
 
      }, 
 
      name: 'test', 
 
      labels: { 
 
       formatter: function() { 
 
        return Highcharts.numberFormat(this.value/1000, 3); 
 
       } 
 
      }, 
 
      crosshair: true 
 
     }], 
 
     yAxis: [{ // Primary yAxis 
 
      labels: { 
 
       formatter: function() { 
 
        return this.value + ' PSI'; 
 
       }, 
 
       style: { 
 
        color: '#4572A7' 
 
       } 
 
      }, 
 
      title: { 
 
       text: 'Pressure', 
 
       style: { 
 
        color: '#4572A7' 
 
       } 
 
      }, 
 
      opposite: false 
 

 
     }, { // Secondary yAxis 
 
      gridLineWidth: 0, 
 
      title: { 
 
       text: 'Vel', //Pallet 
 
       style: { 
 
        color: '#89A54E' 
 
       } 
 
      }, 
 
      labels: { 
 
       formatter: function() { 
 
        return this.value + ' mm/s'; 
 
       }, 
 
       style: { 
 
        color: '#89A54E' 
 
       } 
 
      }, 
 
      opposite: true 
 
     }], 
 
     tooltip: { 
 
      shared: true, 
 
      formatter: function(d){ 
 
       var rV = (this.x/1000).toFixed(2) + "s <br/>"; 
 
       this.points.forEach(function(d,i){ 
 
        rV += '<span style="color:' + d.color + '">\u25CF</span> ' + d.series.name + ': <b> ' + d.y; 
 
        if (i === 0){ 
 
         rV += ' PSI'; 
 
        } else { 
 
         rV += ' mm/s'; 
 
        } 
 
        rV += '</b><br/>'; 
 
       });     
 
       return rV; 
 
\t \t \t }, 
 
      valueDecimals: 4, 
 
     }, 
 
     plotOptions: { 
 
      spline: { 
 
       marker: { 
 
        radius: 1, 
 
       } 
 
      } 
 
     }, 
 
     legend: { 
 
      layout: 'vertical', 
 
      align: 'left', 
 
      x: 100, 
 
      verticalAlign: 'top', 
 
      y: 20, 
 
      floating: true, 
 
      backgroundColor: '#FFFFFF' 
 
     }, 
 
     series: [{ 
 
      name: 'PSI', 
 
      color: '#4572A7', 
 
      yAxis: 0, 
 
      data: [ 
 
       [0, -8.527222], 
 
       [48, -8.19928], 
 
       [98, -8.19928], 
 
       [150, -8.19928], 
 
       [200, -8.19928] 
 
      ], 
 
      tooltip: { 
 
       valueSuffix: ' PSI' 
 
      }, 
 
      marker: { 
 
       radius: 2 
 
      } 
 

 
     }, { 
 
      name: 'Vel', 
 
      color: '#89A54E', 
 
      yAxis: 1, 
 
      data: [ 
 
       [0, 5.376344E-02], 
 
       [48, -5.376344E-02], 
 
       [98, -1.075269E-01], 
 
       [150, 0], 
 
       [200, -2.688172E-01] 
 
      ], 
 
      tooltip: { 
 
       valueSuffix: ' mm/s' 
 
      }, 
 
      marker: { 
 
       radius: 2 
 
      } 
 
     }, { 
 
      name: 'Vel', 
 
      color: '#29A54E', 
 
      yAxis: 1, 
 
      data: [ 
 
       [0, -0], 
 
       [48, 4.032258E-01], 
 
       [98, -0], 
 
       [150, 4.032258E-01], 
 
       [200, -4.032258E-01] 
 
      ], 
 
      tooltip: { 
 
       valueSuffix: ' mm/s' 
 
      }, 
 
      marker: { 
 
       radius: 2 
 
      } 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 300px"></div>