2015-09-23 164 views
0

我使用JavaScript將餅圖的y值格式化爲小數點後兩位,但它們沒有出現在圖表上。Highcharts餅圖不接受值

我需要採取每個百分比,然後返回它們。 fiddle

如果小提琴不起作用,這是我的代碼。

$(function() { 
     var dataPie =[]; 
    var abc =[{"val":"19981","name":"TOTAL"},{"val":"2051","name":"\"NATURAL GAS\""},{"val":"274","name":"\"OTHER FOSSIL FUELS\""},{"val":"8826","name":"\"DUAL FUEL\""},{"val":"5351","name":"\"NUCLEAR\""},{"val":"2628","name":"\"HYDRO\""},{"val":"501","name":"\"WIND\""},{"val":"350","name":"\"OTHER RENEWABLES\""},{"val":" ","name":"\"UNKNOWN\" "}]; 
$.each(abc,function(i,el) 
{ 
    var total = null; 
    if(el.name == "TOTAL"){ 
      total = parseInt(el.val); 
     }else{ 
      var p = parseInt(el.val)/total * 100; 
      dataPie.push({name :el.name,y: p}); 
     } 

}); 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 
     title: { 
      text: 'Browser market shares January, 2015 to May, 2015' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b>: {point.percentage:.2f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: "Brands", 
      colorByPoint: true, 
      data: dataPie 
     }] 
    }); 
}); 
+0

**我需要的百分比問題中的每個**都是令人困惑的...... –

+0

您正在格式化百分比值最高達2的小數點,但highcharts可以做到這一點。看到我的答案。 –

回答

1

highcharts能夠做到這一點,你需要簡單地使用

{point.percentage:.2f} 

看到小提琴,裏面有你的最後一個問題的數據更新here

+0

我更新了問題,以便您可以看到更新。小提琴可能不起作用,但我試圖抓住總計算的百分比。我已經有了格式標籤 – BarryDale2014

+1

我的意思是說,你不需要計算百分比,highcharts可以做到這一點。看到我的小提琴它的工作正常http://jsfiddle.net/Nishith/ng1kvmxh/1/ –

+0

好的謝謝。我仍然不明白爲什麼我的數據沒有通過圖表 – BarryDale2014