使用HighCharts格式化數據點和Y軸標籤

我的數據點由以秒錶示的時間跨度到兩位小數位組成。但是，出於顯示目的，我希望這些值在幾分鐘，幾秒和百分之一秒內被格式化。例如，值125.78應該在工具提示中顯示爲2：05.78，並且Y軸標籤也應該同樣格式化。使用HighCharts格式化數據點和Y軸標籤

$(function() { 
    $('#container').highcharts({ 
     title: { 
      text: '800 Meter times', 
      x: -20 //center 
     }, 
     xAxis: { 
      categories: ['3/7', '3/14', '3/21', '3/28'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Times' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Joe Blow', 
      data: [125.78, 125.12, 123.88, 124.06] 
     }] 
    }); 
});

這裏的的jsfiddle：http://jsfiddle.net/dhf9nod8/

來源

2015-03-30 PongGod

不知道你是否在繪製數據時能夠做到這一點，因爲時間格式將是一個字符串而不是數字 - 但是，您可以查看Highcharts的'tooltip'來顯示用戶懸停在一個地塊上的時間（分鐘） – Adjit 2015-03-30 20:23:08

我是能夠通過谷歌可視化實現這一點，但隨後的版本更新導致了Y軸最大/最小範圍的一些問題，所以我開始探索其他替代方案。 HighCharts，ChartsJS，Chartist等等，從編碼的角度來看似乎都更簡單，但我還沒有能夠處理這些特定的時間格式要求。 – PongGod 2015-03-30 22:14:58

您可以使用yAxis.labels.formatter格式化y軸和tooltip.formatter格式化工具提示。而在下面的功能插件來格式化時間：

var seconds2minutes = function (totalSeconds) { 
    //convert to mins and secs 
    var min = Math.floor(totalSeconds/60); 
    var remainingSeconds = totalSeconds - 60 * min; 
    return min + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds.toFixed(2); 
};

然後用它來格式化y軸

yAxis: { 
     //..your code, then 
     labels: { 
      formatter:function() { 
       return seconds2minutes(this.value); 
      } 
     } 
    },

http://api.highcharts.com/highcharts#yAxis.labels.formatter

然後再使用它來格式化工具提示。裸要求是

tooltip: { 
     formatter:function() { 
      return seconds2minutes(this.y); 
    },

然而，這將覆蓋所有漂亮的HTML你在默認情況下得到的，所以要保持的是，這裏是完整的解決方案：

tooltip: { 
    formatter:function() { 
     //make the x val "small" 
     var retVal="<small>"+this.x+"</small><br />"; 
     //put 2nd line in a div to center vertically 
     retVal+="<div style=height:14px;font-size:12px;line-height:14px;>"; 
     //make the point dot 
     var dot="<div style='background-color:"+this.point.color+";height:6px;width:6px;display:inline-block;border-radius:50%;'> </div> "; 
     //print the dot, series name, and time in bold 
     retVal+=dot+this.series.name+": <strong>"+seconds2minutes(this.y)+"</strong>"; 
     return retVal; 
    }, 
    useHTML:true //not all styles and tags are enabled by default 
},

http://api.highcharts.com/highcharts#tooltip.formatter

而且小提琴：

http://jsfiddle.net/dhf9nod8/2/

來源

2015-03-31 01:54:14 chiliNUT

這太棒了，謝謝！ – PongGod 2015-03-31 14:54:38

兄弟沒問題:) – chiliNUT 2015-04-01 02:37:50

使用HighCharts格式化數據點和Y軸標籤

回答

相關問題