2017-07-27 55 views
0

我在製作高圖表圖形和工具提示時,它是100 +和1000 +在工具欄上有一個符號,但它也有共享:true。同樣在圖2394中,我將它縮小到2.39,所以圖形不是那麼大,然後在工具欄上顯示2.39K。HighCharts向下舍入時超過100

我已經嘗試了很多,我無法弄清楚這看起來遍佈堆棧溢出,沒有發現任何東西。

http://jsfiddle.net/sb7n32zn/22/

Highcharts.chart('container', { 
 

 
    chart: { 
 
     polar: true, 
 
     type: 'area', 
 
     backgroundColor: 'transparent', 
 
      
 
     
 
    
 
    }, 
 
    
 
    exporting: { 
 
     buttons: { 
 
      contextButton: { 
 
       enabled: false 
 
      }  
 
     } 
 
    }, 
 
    
 
    legend: { 
 
      itemStyle: { 
 
       color: '#c4c4c4', 
 
       fontWeight: 'bold' 
 
      } 
 
     }, 
 
    
 
    credits: { 
 
     enabled: false 
 
    }, 
 
    
 
    
 
    title: { 
 
    style: { 
 
     display: 'none' 
 
    } 
 
}, 
 

 

 
plotOptions: { 
 
     series: { 
 
      lineColor: '#808080' 
 
     } 
 
    }, 
 

 

 
    pane: { 
 
     size: '80%', 
 
     
 
     
 
    }, 
 

 
    xAxis: { 
 
     categories: ['Win Rate', 'Kills', 'Deaths', 'Assits', 
 
       'Minions Killed', 'Gold Earned', 'Damage Dealt'], 
 
     tickmarkPlacement: 'on', 
 
     lineWidth: 0, 
 
     gridLineColor: "#808080", 
 
gridLineDashStyle: "Solid", 
 
gridLineWidth: 2, 
 
labels: { 
 
     style: { 
 
      color: '#c4c4c4', 
 
      font: '11px Trebuchet MS, Verdana, sans-serif' 
 
     } 
 
     } 
 
    }, 
 

 
    yAxis: { 
 
     gridLineInterpolation: 'polygon', 
 
     lineWidth: 0, 
 
     min: 0, 
 
     gridLineColor: "#808080", 
 
gridLineDashStyle: "Solid", 
 
gridLineWidth: 2, 
 
labels: { 
 
     style: { 
 
      color: '#c4c4c4', 
 
      font: '11px Trebuchet MS, Verdana, sans-serif' 
 
     } 
 
     } 
 
    }, 
 

 
    tooltip: { 
 
     shared: true, 
 
     pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>', 
 
     
 
    }, 
 

 
    
 

 
    series: [{ 
 
     name: 'Aatrox', 
 
     color: 'rgba(184, 70, 70, 0.7)', 
 
     data: [3843, 7, 7, 6, 15.7, 11.78, 22.05], 
 
     pointPlacement: 'on' 
 
    }, { 
 
     name: 'Gay Something', 
 
     color: 'rgba(85, 184, 70, 0.5)', 
 
     data: [6245, 9, 6, 5, 18.6, 13.54, 23.46], 
 
     pointPlacement: 'on' 
 
    }] 
 

 
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 400px; max-width: 450px; height: 400px; margin: 0 auto"></div>

這是我目前有:

tooltip: { 
    shared: true, 
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>', 

} 
+0

我相信這個話題:https://stackoverflow.com/questions/45361290/highcharts-rounding-yaxis-and-xaxis-digits/45369843#45369843回答你的問題。 –

回答

1

您可以使用格式化選項,提示爲更復雜的格式。參見:

tooltip: { 
     shared: true, 
     formatter: function() { 
      console.log(this); 

      var txt = this.x + ": <br />"; 

      for(var i=0;i<this.points.length;i++){ 
      var value = this.points[i].y; 
      if(value>=1000){ 
       value = (value/1000).toFixed(2) + 'k'; 
      } 

      txt = txt + '<span style="color:' + this.points[i].color + '">' 
       + this.points[i].series.name + ': <b>' + value + '</b><br/>'; 
      } 

      return txt; 
     } 
    }, 

在該功能中,如果你的系列值是超過1000或相等,則它除以1000和修正2小數的情況下,此外,它增加了數「k」標籤中的端部。

但是,圖表仍然很大,因爲該值比其他值大得多。我認爲你必須對數據進行預處理。

希望它有幫助! :D